Most World Wide Web pages contain commands in the language of

Created: 6 years ago | Updated: 2 months ago

Updated: 2 months ago

NIH

HTML

URL

IRC

ঢাকা ব্যাংক ট্রেইনি সহকারী ১২. ০৪.২০১৯ তথ্য প্রযুক্তি ওয়েব ডিজাইন পরিচিতি এবং HTML 2019

Des

1 1.5k

Best Ans:

Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.

0 0

ওয়েব ডিজাইন পরিচিতি এবং HTML টপিকের বিষয়বস্তুঃ

ওয়েব ডিজাইন (Web Design) হলো এমন একটি প্রক্রিয়া যার মাধ্যমে একটি ওয়েবসাইটের আকার, বিন্যাস, রং, ফন্ট, গ্রাফিক্স, এবং ইউজার ইন্টারফেস তৈরি করা হয়। এটি একটি ওয়েবসাইটকে ব্যবহারকারীর জন্য কার্যকরী, দৃষ্টিনন্দন, এবং সহজবোধ্য করে তোলে। ওয়েব ডিজাইনের প্রধান কাজ হলো ব্যবহারকারীদের অভিজ্ঞতা উন্নত করা এবং সাইটে নেভিগেশনকে সহজ করা। আধুনিক ওয়েব ডিজাইন শুধু ডেস্কটপের জন্যই নয়, মোবাইল এবং ট্যাবলেটের মতো অন্যান্য ডিভাইসের জন্যও গুরুত্বপূর্ণ।

ওয়েব ডিজাইনের মূল উপাদান:

১. লেআউট (Layout):

লেআউট হলো ওয়েবসাইটের কাঠামো, যেখানে বিভিন্ন উপাদান যেমন হেডার, ফুটার, মেনু, এবং কন্টেন্ট রাখা হয়। এটি ওয়েবসাইটের সঠিক বিন্যাস এবং ব্যবহারকারীদের সহজে তথ্য খুঁজে পাওয়ার ব্যবস্থা করে।

২. গ্রাফিক্স (Graphics):

ওয়েবসাইটে ব্যবহৃত ছবি, লোগো, এবং আইকনগুলোই গ্রাফিক্স। এগুলো ওয়েবসাইটকে দৃষ্টিনন্দন এবং তথ্যপূর্ণ করে তোলে।

৩. ফন্ট এবং রং (Fonts and Colors):

ওয়েবসাইটে ব্যবহৃত ফন্ট এবং রং ওয়েবসাইটের দৃষ্টিনন্দনতা এবং ব্র্যান্ড পরিচিতি নির্ধারণ করে। এর মাধ্যমে ব্যবহারকারীর মনোযোগ আকর্ষণ করা হয়।

৪. ইউজার ইন্টারফেস (User Interface - UI):

ওয়েবসাইটের ব্যবহারকারীর সাথে যোগাযোগের পদ্ধতিকে UI বলা হয়। এটি একটি ওয়েবসাইটকে কার্যকরী এবং ব্যবহারকারীদের জন্য সহজে নেভিগেট করার সুযোগ দেয়।

৫. রেসপনসিভ ডিজাইন (Responsive Design):

রেসপনসিভ ডিজাইন হলো ওয়েবসাইটের এমন একটি ফিচার যা বিভিন্ন আকারের ডিভাইসে (ডেস্কটপ, মোবাইল, ট্যাবলেট) উপযুক্তভাবে প্রদর্শিত হয়।

HTML (হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ):

HTML (Hypertext Markup Language) হলো ওয়েবসাইট তৈরি করার জন্য ব্যবহৃত একটি প্রাথমিক ভাষা। HTML মূলত ওয়েব পেজের স্ট্রাকচার বা কাঠামো তৈরি করে, যেখানে বিভিন্ন উপাদান যেমন টেক্সট, ইমেজ, এবং লিঙ্ক স্থাপন করা হয়। HTML ব্যবহার করে ওয়েবসাইটের বেসিক কাঠামো তৈরি করা হয়, যা ব্রাউজারকে নির্দেশ দেয় কীভাবে একটি ওয়েব পেজ প্রদর্শিত হবে।

HTML এর প্রধান উপাদানসমূহ:

১. ট্যাগ (Tag):

HTML ট্যাগ হলো নির্দেশনা যা ব্রাউজারকে জানায় কীভাবে কন্টেন্ট প্রদর্শন করতে হবে। প্রতিটি HTML ট্যাগের শুরু এবং শেষ থাকে। উদাহরণ: ..., ...।

২. এলিমেন্ট (Element):

HTML এলিমেন্ট হলো ট্যাগ এবং তার মধ্যে থাকা কন্টেন্ট। উদাহরণ: এটি একটি প্যারাগ্রাফ।

৩. অ্যাট্রিবিউট (Attribute):

HTML অ্যাট্রিবিউট হলো ট্যাগের কিছু অতিরিক্ত তথ্য যা উপাদানের বৈশিষ্ট্য নির্ধারণ করে। উদাহরণ: ।

একটি সাধারণ HTML ডকুমেন্টের উদাহরণ:




    আমার প্রথম ওয়েব পেজ


    স্বাগতম!
    এটি আমার প্রথম HTML পেজ।

উদাহরণটি একটি সাধারণ HTML পেজ দেখায়, যেখানে হেডারে একটি শিরোনাম </code> এবং বডিতে একটি প্রধান শিরোনাম <code><h1></code> এবং একটি প্যারাগ্রাফ <code><p></code> রয়েছে।</p><h3>HTML এর প্রধান ট্যাগসমূহ:</h3><p>১. <code><strong><html></strong></code>: HTML ডকুমেন্টের শুরু এবং শেষ নির্দেশ করে। ২. <code><strong><head></strong></code>: ডকুমেন্টের মেটাডেটা (যেমন শিরোনাম) ধারণ করে। ৩. <code><strong><title></strong></code>: ওয়েব পেজের টাইটেল নির্ধারণ করে, যা ব্রাউজারের ট্যাবে প্রদর্শিত হয়। ৪. <code><strong><body></strong></code>: HTML ডকুমেন্টের মূল কন্টেন্ট ধারণ করে। ৫. <code><strong><h1></strong></code><strong> থেকে </strong><code><strong><h6></strong></code>: বিভিন্ন স্তরের শিরোনাম তৈরি করে। <code><h1></code> সবচেয়ে বড় এবং <code><h6></code> সবচেয়ে ছোট। ৬. <code><strong><p></strong></code>: প্যারাগ্রাফ তৈরি করে। ৭. <code><strong><img></strong></code>: ইমেজ যোগ করার জন্য ব্যবহৃত হয়। ৮. <code><strong><a></strong></code>: হাইপারলিংক তৈরি করে, যা অন্য পেজ বা ওয়েবসাইটে নিয়ে যায়।</p><h3>সারসংক্ষেপ:</h3><p><strong>ওয়েব ডিজাইন</strong> হলো একটি প্রক্রিয়া যা ওয়েবসাইটের ভিজ্যুয়াল এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য কাজ করে, এবং <strong>HTML</strong> হলো সেই ভাষা যার মাধ্যমে ওয়েবসাইটের বেসিক স্ট্রাকচার তৈরি করা হয়। HTML ওয়েব ডিজাইনের ভিত্তি হিসেবে কাজ করে, যা CSS এবং JavaScript-এর মতো অন্যান্য প্রযুক্তি দিয়ে উন্নত করা যায়।</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="d-flex align-items-center flex-wrap gap-2 mt-2 mb-5"> <a href="#" class="btn btn-primary sa-btn-primary btn-sm d-flex align-items-center gap-1 fs-4"> <span>🎯</span> <span>ওয়েব ডিজাইন পরিচিতি এবং HTML টপিকে পরীক্ষা দিন</span> </a> <a href="#" class="btn btn-primary sa-btn-primary btn-sm d-flex align-items-center gap-1 fs-4"> <span>📝</span> <span>ওয়েব ডিজাইন পরিচিতি এবং HTML টপিকে প্র্যাকটিস করুন</span> </a> <a href="https://sattacademy.com/e-question-builder/select-question?subject_id=4" class="btn btn-primary sa-btn-primary btn-sm d-flex align-items-center gap-1 fs-4"> <span>📄</span> <span>তথ্য প্রযুক্তি টপিকে প্রশ্নপত্র তৈরি করুন</span> </a> </div> </div> <div class="row g-5 g-xl-10"> <div class="col-12"> <div class="d-flex flex-column"> <div class="sa-bg-success px-0 mx-0 py-3 rounded rounded-bottom-0"> <div class="d-flex align-items-center justify-content-between px-5"> <h3 class="text-dark fs-2">Related Question</h3> <a href=" https://sattacademy.com/job-solution/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/mcq " class="btn btn-light btn-sm rounded-0 px-3 text-dark"> View More <i class="fas fa-external-link-alt ms-1 text-dark"></i> </a> </div> </div>  <div class="card card-bordered rounded-top-0 mb-5 ">  <div class="card-header pt-2 mx-0 px-2"> <div class="card-title fw-bold cursor-pointer mb-0"> <a href=" https://sattacademy.com/mcq/default-port-for-http " class="text-dark text-hover-primary fw-bolder"> <div class="p-0 m-0 fs-3 text-dark d-flex align-items-start question-card-div"> <span class="me-1" style="white-space: nowrap"> 1 .</span> <div class="d-flex align-items-center justify-content-between"> <span class="question-span p-mb-0 white-heading">Default port for HTTP? </span> </div> </div> </a> </div> <div class="d-flex align-items-center justify-content-between w-100 toolbar-div "> <div class="p-0"> <div class="destop d-none d-md-block"> <span class="fs-9 fs-md-8 text-muted "> Created: 4 years ago | </span> <span class="fs-9 fs-md-8 text-muted"> Updated: 9 months ago </span> </div> <div class="mobile d-md-none"> <span class="fs-9 fs-md-8 text-muted"> Updated: 9 months ago </span> </div> </div> </div> </div>   <div class="card-body pb-3 pt-5 fs-md-5 parent-card-body">    <input type="hidden" name="active_mode" value="reading">  <div class="reading-mode-data "> <div class="row" style="word-break: break-word;"> <div class="col-md-6 mb-3"> <div class="text-dark fs-4"> <div class="d-flex align-items-start"> <span class="me-2"> <i class="fas fa-dot-circle text-dark"> </i> </span> <div> <span class="overflow-auto scroll-bar-none"> <label for="kkradio_option1_78182"> 23 </label> </span> </div> </div> </div> </div> <div class="col-md-6 mb-3"> <div class="text-dark fs-4"> <div class="d-flex align-items-start"> <span class="me-2"> <i class="fas fa-dot-circle text-dark"> </i> </span> <div> <span class="overflow-auto scroll-bar-none"> <label for="kkradio_option2_78182"> 25 </label> </span> </div> </div> </div> </div> <div class="col-md-6 mb-3"> <div class="text-dark fs-3"> <div class="d-flex align-items-start"> <span class="me-2"> <i class="fas fa-check-circle sa-success fs-3"> </i> </span> <div> <span class="overflow-auto scroll-bar-none"> <label for="kkradio_option3_78182"> 80 </label> </span> </div> </div> </div> </div> <div class="col-md-6 mb-3"> <div class="text-dark fs-4"> <div class="d-flex align-items-start"> <span class="me-2"> <i class="fas fa-dot-circle text-dark"> </i> </span> <div> <span class="overflow-auto scroll-bar-none"> <label for="kkradio_option4_78182"> 45 </label> </span> </div> </div> </div> </div> </div> </div> <div class="test-mode-data d-none"> <div class="row parent-row"> <input type="hidden" name="answer" value="3"> <div class="col-md-6 mb-1"> <div class="text-dark cursor-pointer click-option fs-5 option-1-text" data-id="78182" data-option_value="1"> <span class="d-flex"> <span class="me-2"><i class="fas fa-dot-circle text-dark option-1"></i></span> <span class="overflow-auto scroll-bar-none">23</span> </span> </div> </div> <div class="col-md-6 mb-1"> <div class=" text-dark cursor-pointer click-option fs-5 option-2-text" data-id="78182" data-option_value="2"> <span class="d-flex"> <span class="me-2"><i class="fas fa-dot-circle text-dark option-2"></i></span> <span class="overflow-auto scroll-bar-none">25</span> </span> </div> </div> <div class="col-md-6 mb-1"> <div class=" text-dark cursor-pointer click-option fs-5 option-3-text" data-id="78182" data-option_value="3"> <span class="d-flex"> <span class="me-2"><i class="fas fa-dot-circle text-dark option-3"></i></span> <span class="overflow-auto scroll-bar-none">80</span> </span> </div> </div> <div class="col-md-6 mb-1"> <div class=" text-dark cursor-pointer click-option fs-5 option-4-text" data-id="78182" data-option_value="4"> <span class="d-flex"> <span class="me-2"><i class="fas fa-dot-circle text-dark option-4"></i></span> <span class="overflow-auto scroll-bar-none">45</span> </span> </div> </div> <div class="col-md-6 mb-1"> </div> </div> </div>     <div class="px-0 overflow-auto tag-div " style="margin: 0px -4px"> <a href=" https://sattacademy.com/job-solution/mcq/%E0%A6%B8%E0%A6%BF%E0%A6%95%E0%A6%BF%E0%A6%89%E0%A6%B0%E0%A6%BF%E0%A6%9F%E0%A6%BF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%BF%E0%A6%A8%E0%A7%8D%E0%A6%9F%E0%A6%BF%E0%A6%82-%E0%A6%95%E0%A6%B0%E0%A7%8D%E0%A6%AA%E0%A7%8B%E0%A6%B0%E0%A7%87%E0%A6%B6%E0%A6%A8-%E0%A6%AC%E0%A6%BE%E0%A6%82%E0%A6%B2%E0%A6%BE%E0%A6%A6%E0%A7%87%E0%A6%B6-%E0%A6%B8%E0%A6%B9%E0%A6%95%E0%A6%BE%E0%A6%B0%E0%A7%80-%E0%A6%AC%E0%A7%8D%E0%A6%AF%E0%A6%AC%E0%A6%B8%E0%A7%8D%E0%A6%A5%E0%A6%BE%E0%A6%AA%E0%A6%95-26-11-2021/all "> <span class="badge badge-light fs-8 mb-0 mt-3 text-dark fw-normal text-hover-primary">সিকিউরিটি প্রিন্টিং কর্পোরেশন বাংলাদেশ | সহকারী ব্যবস্থাপক- 26-11-2021</span> </a> <a href=" https://sattacademy.com/job-solution/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/mcq "> <span class="badge badge-light fs-8 mb-0 mt-3 text-dark fw-normal text-hover-primary">তথ্য প্রযুক্তি</span> </a> <a href=" https://sattacademy.com/guide/%E0%A6%93%E0%A6%AF%E0%A6%BC%E0%A7%87%E0%A6%AC-%E0%A6%A1%E0%A6%BF%E0%A6%9C%E0%A6%BE%E0%A6%87%E0%A6%A8-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BF%E0%A6%A4%E0%A6%BF-%E0%A6%8F%E0%A6%AC%E0%A6%82-html "> <span class="badge badge-light fs-8 mb-0 mt-3 text-dark fw-normal text-hover-primary">ওয়েব ডিজাইন পরিচিতি এবং HTML</span> </a> </div>  </div>   <div class="card-footer py-2 px-0 m-0 footer-div"> <div class="d-flex justify-content-between align-items-center"> <div class="description-btn"> <span class="fs-5 fw-bold text-black cursor-pointer show-des"> <a href="javascript:void(0)" class="me-2 px-4 fw-bolder getDescription" data-id="78182" data-type="mcq"> Des <i class="fas fa-caret-right fa-2xl" style="font-size: 16px"></i> <span class="indicator-progress ms-4 mt-3 mt-mb-0">Please Wait <span class="spinner-border spinner-border-sm align-middle ms-2"></span> </span> </a> </span> </div> <div class="activity "> <div class="d-flex align-items-center justify-content-end flex-wrap"> <a href="javascript:void(0)" class="vote custom-text-gray me-md-10 me-7 fw-bolder fs-5" data-id="78182" data-vote_id="" data-type="mcq"> <i class="fas fa-heart fs-7 me-1 "></i> <span class="vote_value fs-7"> 5 </span> </a> <span class="me-7 me-md-10 fs-7 fw-bolder custom-text-gray" style="cursor:default"> <i class="fas fa-eye fs-7 me-1"></i> 1k </span> <a href="javascript:void(0)" class="share pe-4"> <i class="fas fa-share-alt text-primary fs-7"></i> </a> </div> </div> </div> <div class="all-description d-none px-2"> </div> </div> </div>  <div class="card card-bordered rounded mb-5 ">  <div class="card-header pt-2 mx-0 px-2"> <div class="card-title fw-bold cursor-pointer mb-0"> <a href=" https://sattacademy.com/mcq/%E0%A6%A8%E0%A6%BF%E0%A6%9A%E0%A7%87%E0%A6%B0-%E0%A6%95%E0%A7%8B%E0%A6%A8%E0%A6%9F%E0%A6%BF-%E0%A6%95%E0%A6%AE%E0%A7%8D%E0%A6%AA%E0%A6%BF%E0%A6%89%E0%A6%9F%E0%A6%BE%E0%A6%B0%E0%A7%87%E0%A6%B0-%E0%A6%8F%E0%A6%95%E0%A6%9F%E0%A6%BF-%E0%A6%AE%E0%A6%BE%E0%A6%B0%E0%A7%8D%E0%A6%95%E0%A6%86%E0%A6%AA-%E0%A6%AD%E0%A6%BE%E0%A6%B7%E0%A6%BE-57491 " class="text-dark text-hover-primary fw-bolder"> <div class="p-0 m-0 fs-3 text-dark d-flex align-items-start question-card-div"> <span class="me-1" style="white-space: nowrap"> 2 .</span> <div class="d-flex align-items-center justify-content-between"> <span class="question-span p-mb-0 white-heading">নিচের কোনটি কম্পিউটারের একটি মার্কআপ ভাষা? </span> </div> </div> </a> </div> <div class="d-flex align-items-center justify-content-between w-100 toolbar-div "> <div class="p-0"> <div class="destop d-none d-md-block"> <span class="fs-9 fs-md-8 text-muted "> Created: 4 years ago | </span> <span class="fs-9 fs-md-8 text-muted"> Updated: 3 months ago </span> </div> <div class="mobile d-md-none"> <span class="fs-9 fs-md-8 text-muted"> Updated: 3 months ago </span> </div> </div> </div> </div>   <div class="card-body pb-3 pt-5 fs-md-5 parent-card-body">    <input type="hidden" name="active_mode" value="reading">  <div class="reading-mode-data "> <div class="row" style="word-break: break-word;"> <div class="col-md-6 mb-3"> <div class="text-dark fs-3"> <div class="d-flex align-items-start"> <span class="me-2"> <i class="fas fa-check-circle sa-success fs-3"> </i> </span> <div> <span class="overflow-auto scroll-bar-none"> <label for="kkradio_option1_77314"> HTML </label> </span> </div> </div> </div> </div> <div class="col-md-6 mb-3"> <div class="text-dark fs-4"> <div class="d-flex align-items-start"> <span class="me-2"> <i class="fas fa-dot-circle text-dark"> </i> </span> <div> <span class="overflow-auto scroll-bar-none"> <label for="kkradio_option2_77314"> PHP </label> </span> </div> </div> </div> </div> <div class="col-md-6 mb-3"> <div class="text-dark fs-4"> <div class="d-flex align-items-start"> <span class="me-2"> <i class="fas fa-dot-circle text-dark"> </i> </span> <div> <span class="overflow-auto scroll-bar-none"> <label for="kkradio_option3_77314"> JAVA </label> </span> </div> </div> </div> </div> <div class="col-md-6 mb-3"> <div class="text-dark fs-4"> <div class="d-flex align-items-start"> <span class="me-2"> <i class="fas fa-dot-circle text-dark"> </i> </span> <div> <span class="overflow-auto scroll-bar-none"> <label for="kkradio_option4_77314"> PYTHON </label> </span> </div> </div> </div> </div> </div> </div> <div class="test-mode-data d-none"> <div class="row parent-row"> <input type="hidden" name="answer" value="1"> <div class="col-md-6 mb-1"> <div class="text-dark cursor-pointer click-option fs-5 option-1-text" data-id="77314" data-option_value="1"> <span class="d-flex"> <span class="me-2"><i class="fas fa-dot-circle text-dark option-1"></i></span> <span class="overflow-auto scroll-bar-none">HTML</span> </span> </div> </div> <div class="col-md-6 mb-1"> <div class=" text-dark cursor-pointer click-option fs-5 option-2-text" data-id="77314" data-option_value="2"> <span class="d-flex"> <span class="me-2"><i class="fas fa-dot-circle text-dark option-2"></i></span> <span class="overflow-auto scroll-bar-none">PHP</span> </span> </div> </div> <div class="col-md-6 mb-1"> <div class=" text-dark cursor-pointer click-option fs-5 option-3-text" data-id="77314" data-option_value="3"> <span class="d-flex"> <span class="me-2"><i class="fas fa-dot-circle text-dark option-3"></i></span> <span class="overflow-auto scroll-bar-none">JAVA</span> </span> </div> </div> <div class="col-md-6 mb-1"> <div class=" text-dark cursor-pointer click-option fs-5 option-4-text" data-id="77314" data-option_value="4"> <span class="d-flex"> <span class="me-2"><i class="fas fa-dot-circle text-dark option-4"></i></span> <span class="overflow-auto scroll-bar-none">PYTHON</span> </span> </div> </div> <div class="col-md-6 mb-1"> </div> </div> </div>     <div class="px-0 overflow-auto tag-div " style="margin: 0px -4px"> <a href=" https://sattacademy.com/job-solution/mcq/%E0%A6%A2%E0%A6%BE%E0%A6%95%E0%A6%BE-%E0%A6%AA%E0%A6%BE%E0%A6%93%E0%A6%AF%E0%A6%BC%E0%A6%BE%E0%A6%B0-%E0%A6%A1%E0%A6%BF%E0%A6%B8%E0%A7%8D%E0%A6%9F%E0%A7%8D%E0%A6%B0%E0%A6%BF%E0%A6%AC%E0%A6%BF%E0%A6%89%E0%A6%B6%E0%A6%A8-%E0%A6%95%E0%A7%8B%E0%A6%AE%E0%A7%8D%E0%A6%AA%E0%A6%BE%E0%A6%A8%E0%A7%80-%E0%A6%B2%E0%A6%BF%E0%A6%AE%E0%A6%BF%E0%A6%9F%E0%A7%87%E0%A6%A1-dpdc-%E0%A6%B8%E0%A7%81%E0%A6%87%E0%A6%9A-%E0%A6%AC%E0%A7%8B%E0%A6%B0%E0%A7%8D%E0%A6%A1-%E0%A6%8F%E0%A6%9F%E0%A7%87%E0%A6%A8%E0%A6%A1%E0%A7%87%E0%A6%A8%E0%A7%8D%E0%A6%9F-05-11-2021/all "> <span class="badge badge-light fs-8 mb-0 mt-3 text-dark fw-normal text-hover-primary">ঢাকা পাওয়ার ডিস্ট্রিবিউশন কোম্পানী লিমিটেড (DPDC) | সুইচ বোর্ড এটেনডেন্ট -05-11-2021</span> </a> <a href=" https://sattacademy.com/job-solution/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/mcq "> <span class="badge badge-light fs-8 mb-0 mt-3 text-dark fw-normal text-hover-primary">তথ্য প্রযুক্তি</span> </a> <a href=" https://sattacademy.com/guide/%E0%A6%93%E0%A6%AF%E0%A6%BC%E0%A7%87%E0%A6%AC-%E0%A6%A1%E0%A6%BF%E0%A6%9C%E0%A6%BE%E0%A6%87%E0%A6%A8-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BF%E0%A6%A4%E0%A6%BF-%E0%A6%8F%E0%A6%AC%E0%A6%82-html "> <span class="badge badge-light fs-8 mb-0 mt-3 text-dark fw-normal text-hover-primary">ওয়েব ডিজাইন পরিচিতি এবং HTML</span> </a> </div>  </div>   <div class="card-footer py-2 px-0 m-0 footer-div"> <div class="d-flex justify-content-between align-items-center"> <div class="description-btn"> <span class="fs-5 fw-bold text-black cursor-pointer show-des"> <a href="javascript:void(0)" class="me-2 px-4 fw-bolder getDescription" data-id="77314" data-type="mcq"> Des <i class="fas fa-caret-right fa-2xl" style="font-size: 16px"></i> <span class="indicator-progress ms-4 mt-3 mt-mb-0">Please Wait <span class="spinner-border spinner-border-sm align-middle ms-2"></span> </span> </a> </span> </div> <div class="activity "> <div class="d-flex align-items-center justify-content-end flex-wrap"> <a href="javascript:void(0)" class="vote custom-text-gray me-md-10 me-7 fw-bolder fs-5" data-id="77314" data-vote_id="" data-type="mcq"> <i class="fas fa-heart fs-7 me-1 "></i> <span class="vote_value fs-7"> 2 </span> </a> <span class="me-7 me-md-10 fs-7 fw-bolder custom-text-gray" style="cursor:default"> <i class="fas fa-eye fs-7 me-1"></i> 1.1k </span> <a href="javascript:void(0)" class="share pe-4"> <i class="fas fa-share-alt text-primary fs-7"></i> </a> </div> </div> </div> <div class="all-description d-none px-2"> </div> </div> </div>  <div class="card card-bordered rounded mb-5 ">  <div class="card-header pt-2 mx-0 px-2"> <div class="card-title fw-bold cursor-pointer mb-0"> <a href=" https://sattacademy.com/mcq/the-newest-version-of-html-is " class="text-dark text-hover-primary fw-bolder"> <div class="p-0 m-0 fs-3 text-dark d-flex align-items-start question-card-div"> <span class="me-1" style="white-space: nowrap"> 3 .</span> <div class="d-flex align-items-center justify-content-between"> <span class="question-span p-mb-0 white-heading">The newest version of HTML is? </span> </div> </div> </a> </div> <div class="d-flex align-items-center justify-content-between w-100 toolbar-div "> <div class="p-0"> <div class="destop d-none d-md-block"> <span class="fs-9 fs-md-8 text-muted "> Created: 4 years ago | </span> <span class="fs-9 fs-md-8 text-muted"> Updated: 5 months ago </span> </div> <div class="mobile d-md-none"> <span class="fs-9 fs-md-8 text-muted"> Updated: 5 months ago </span> </div> </div> </div> </div>   <div class="card-body pb-3 pt-5 fs-md-5 parent-card-body">    <input type="hidden" name="active_mode" value="reading">  <div class="reading-mode-data "> <div class="row" style="word-break: break-word;"> <div class="col-md-6 mb-3"> <div class="text-dark fs-4"> <div class="d-flex align-items-start"> <span class="me-2"> <i class="fas fa-dot-circle text-dark"> </i> </span> <div> <span class="overflow-auto scroll-bar-none"> <label for="kkradio_option1_76158"> WML </label> </span> </div> </div> </div> </div> <div class="col-md-6 mb-3"> <div class="text-dark fs-3"> <div class="d-flex align-items-start"> <span class="me-2"> <i class="fas fa-check-circle sa-success fs-3"> </i> </span> <div> <span class="overflow-auto scroll-bar-none"> <label for="kkradio_option2_76158"> HTML5 </label> </span> </div> </div> </div> </div> <div class="col-md-6 mb-3"> <div class="text-dark fs-4"> <div class="d-flex align-items-start"> <span class="me-2"> <i class="fas fa-dot-circle text-dark"> </i> </span> <div> <span class="overflow-auto scroll-bar-none"> <label for="kkradio_option3_76158"> XSL </label> </span> </div> </div> </div> </div> <div class="col-md-6 mb-3"> <div class="text-dark fs-4"> <div class="d-flex align-items-start"> <span class="me-2"> <i class="fas fa-dot-circle text-dark"> </i> </span> <div> <span class="overflow-auto scroll-bar-none"> <label for="kkradio_option4_76158"> DTML 3 </label> </span> </div> </div> </div> </div> </div> </div> <div class="test-mode-data d-none"> <div class="row parent-row"> <input type="hidden" name="answer" value="2"> <div class="col-md-6 mb-1"> <div class="text-dark cursor-pointer click-option fs-5 option-1-text" data-id="76158" data-option_value="1"> <span class="d-flex"> <span class="me-2"><i class="fas fa-dot-circle text-dark option-1"></i></span> <span class="overflow-auto scroll-bar-none">WML</span> </span> </div> </div> <div class="col-md-6 mb-1"> <div class=" text-dark cursor-pointer click-option fs-5 option-2-text" data-id="76158" data-option_value="2"> <span class="d-flex"> <span class="me-2"><i class="fas fa-dot-circle text-dark option-2"></i></span> <span class="overflow-auto scroll-bar-none">HTML5</span> </span> </div> </div> <div class="col-md-6 mb-1"> <div class=" text-dark cursor-pointer click-option fs-5 option-3-text" data-id="76158" data-option_value="3"> <span class="d-flex"> <span class="me-2"><i class="fas fa-dot-circle text-dark option-3"></i></span> <span class="overflow-auto scroll-bar-none">XSL</span> </span> </div> </div> <div class="col-md-6 mb-1"> <div class=" text-dark cursor-pointer click-option fs-5 option-4-text" data-id="76158" data-option_value="4"> <span class="d-flex"> <span class="me-2"><i class="fas fa-dot-circle text-dark option-4"></i></span> <span class="overflow-auto scroll-bar-none">DTML 3</span> </span> </div> </div> <div class="col-md-6 mb-1"> </div> </div> </div>     <div class="px-0 overflow-auto tag-div " style="margin: 0px -4px"> <a href=" https://sattacademy.com/job-solution/mcq/%E0%A6%B8%E0%A7%8B%E0%A6%A8%E0%A6%BE%E0%A6%B2%E0%A7%80-%E0%A6%93-%E0%A6%9C%E0%A6%A8%E0%A6%A4%E0%A6%BE-%E0%A6%AC%E0%A7%8D%E0%A6%AF%E0%A6%BE%E0%A6%82%E0%A6%95-%E0%A6%85%E0%A6%AB%E0%A6%BF%E0%A6%B8%E0%A6%BE%E0%A6%B0-%E0%A6%86%E0%A6%87%E0%A6%9F%E0%A6%BF-02102021/all "> <span class="badge badge-light fs-8 mb-0 mt-3 text-dark fw-normal text-hover-primary">সোনালী ও জনতা ব্যাংক - অফিসার(আইটি) - 02.10.2021</span> </a> <a href=" https://sattacademy.com/job-solution/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/mcq "> <span class="badge badge-light fs-8 mb-0 mt-3 text-dark fw-normal text-hover-primary">তথ্য প্রযুক্তি</span> </a> <a href=" https://sattacademy.com/guide/%E0%A6%93%E0%A6%AF%E0%A6%BC%E0%A7%87%E0%A6%AC-%E0%A6%A1%E0%A6%BF%E0%A6%9C%E0%A6%BE%E0%A6%87%E0%A6%A8-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BF%E0%A6%A4%E0%A6%BF-%E0%A6%8F%E0%A6%AC%E0%A6%82-html "> <span class="badge badge-light fs-8 mb-0 mt-3 text-dark fw-normal text-hover-primary">ওয়েব ডিজাইন পরিচিতি এবং HTML</span> </a> </div>  </div>   <div class="card-footer py-2 px-0 m-0 footer-div"> <div class="d-flex justify-content-between align-items-center"> <div class="description-btn"> <span class="fs-5 fw-bold text-black cursor-pointer show-des"> <a href="javascript:void(0)" class="me-2 px-4 fw-bolder getDescription" data-id="76158" data-type="mcq"> Des <i class="fas fa-caret-right fa-2xl" style="font-size: 16px"></i> <span class="indicator-progress ms-4 mt-3 mt-mb-0">Please Wait <span class="spinner-border spinner-border-sm align-middle ms-2"></span> </span> </a> </span> </div> <div class="activity "> <div class="d-flex align-items-center justify-content-end flex-wrap"> <a href="javascript:void(0)" class="vote custom-text-gray me-md-10 me-7 fw-bolder fs-5" data-id="76158" data-vote_id="" data-type="mcq"> <i class="fas fa-heart fs-7 me-1 "></i> <span class="vote_value fs-7"> 3 </span> </a> <span class="me-7 me-md-10 fs-7 fw-bolder custom-text-gray" style="cursor:default"> <i class="fas fa-eye fs-7 me-1"></i> 1.5k </span> <a href="javascript:void(0)" class="share pe-4"> <i class="fas fa-share-alt text-primary fs-7"></i> </a> </div> </div> </div> <div class="all-description d-none px-2"> </div> </div> </div>  <div class="card card-bordered rounded mb-5 ">  <div class="card-header pt-2 mx-0 px-2"> <div class="card-title fw-bold cursor-pointer mb-0"> <a href=" https://sattacademy.com/mcq/what-is-the-correct-html-tag-for-columns-in-a-table " class="text-dark text-hover-primary fw-bolder"> <div class="p-0 m-0 fs-3 text-dark d-flex align-items-start question-card-div"> <span class="me-1" style="white-space: nowrap"> 4 .</span> <div class="d-flex align-items-center justify-content-between"> <span class="question-span p-mb-0 white-heading">What is the correct HTML tag for columns in a table </span> </div> </div> </a> </div> <div class="d-flex align-items-center justify-content-between w-100 toolbar-div "> <div class="p-0"> <div class="destop d-none d-md-block"> <span class="fs-9 fs-md-8 text-muted "> Created: 4 years ago | </span> <span class="fs-9 fs-md-8 text-muted"> Updated: 10 months ago </span> </div> <div class="mobile d-md-none"> <span class="fs-9 fs-md-8 text-muted"> Updated: 10 months ago </span> </div> </div> </div> </div>   <div class="card-body pb-3 pt-5 fs-md-5 parent-card-body">    <input type="hidden" name="active_mode" value="reading">  <div class="reading-mode-data "> <div class="row" style="word-break: break-word;"> <div class="col-md-6 mb-3"> <div class="text-dark fs-4"> <div class="d-flex align-items-start"> <span class="me-2"> <i class="fas fa-dot-circle text-dark"> </i> </span> <div> <span class="overflow-auto scroll-bar-none"> <label for="kkradio_option1_75187"> <tr></tr> </label> </span> </div> </div> </div> </div> <div class="col-md-6 mb-3"> <div class="text-dark fs-4"> <div class="d-flex align-items-start"> <span class="me-2"> <i class="fas fa-dot-circle text-dark"> </i> </span> <div> <span class="overflow-auto scroll-bar-none"> <label for="kkradio_option2_75187"> <th></th> </label> </span> </div> </div> </div> </div> <div class="col-md-6 mb-3"> <div class="text-dark fs-3"> <div class="d-flex align-items-start"> <span class="me-2"> <i class="fas fa-check-circle sa-success fs-3"> </i> </span> <div> <span class="overflow-auto scroll-bar-none"> <label for="kkradio_option3_75187"> <td></td> </label> </span> </div> </div> </div> </div> <div class="col-md-6 mb-3"> <div class="text-dark fs-4"> <div class="d-flex align-items-start"> <span class="me-2"> <i class="fas fa-dot-circle text-dark"> </i> </span> <div> <span class="overflow-auto scroll-bar-none"> <label for="kkradio_option4_75187"> <tc></tc> </label> </span> </div> </div> </div> </div> </div> </div> <div class="test-mode-data d-none"> <div class="row parent-row"> <input type="hidden" name="answer" value="3"> <div class="col-md-6 mb-1"> <div class="text-dark cursor-pointer click-option fs-5 option-1-text" data-id="75187" data-option_value="1"> <span class="d-flex"> <span class="me-2"><i class="fas fa-dot-circle text-dark option-1"></i></span> <span class="overflow-auto scroll-bar-none"><tr></tr></span> </span> </div> </div> <div class="col-md-6 mb-1"> <div class=" text-dark cursor-pointer click-option fs-5 option-2-text" data-id="75187" data-option_value="2"> <span class="d-flex"> <span class="me-2"><i class="fas fa-dot-circle text-dark option-2"></i></span> <span class="overflow-auto scroll-bar-none"><th></th></span> </span> </div> </div> <div class="col-md-6 mb-1"> <div class=" text-dark cursor-pointer click-option fs-5 option-3-text" data-id="75187" data-option_value="3"> <span class="d-flex"> <span class="me-2"><i class="fas fa-dot-circle text-dark option-3"></i></span> <span class="overflow-auto scroll-bar-none"><td></td></span> </span> </div> </div> <div class="col-md-6 mb-1"> <div class=" text-dark cursor-pointer click-option fs-5 option-4-text" data-id="75187" data-option_value="4"> <span class="d-flex"> <span class="me-2"><i class="fas fa-dot-circle text-dark option-4"></i></span> <span class="overflow-auto scroll-bar-none"><tc></tc></span> </span> </div> </div> <div class="col-md-6 mb-1"> </div> </div> </div>     <div class="px-0 overflow-auto tag-div " style="margin: 0px -4px"> <a href=" https://sattacademy.com/job-solution/mcq/officer-cash-25-09-2021/all "> <span class="badge badge-light fs-8 mb-0 mt-3 text-dark fw-normal text-hover-primary">Officer (Cash)-25-09-2021</span> </a> <a href=" https://sattacademy.com/job-solution/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/mcq "> <span class="badge badge-light fs-8 mb-0 mt-3 text-dark fw-normal text-hover-primary">তথ্য প্রযুক্তি</span> </a> <a href=" https://sattacademy.com/guide/%E0%A6%93%E0%A6%AF%E0%A6%BC%E0%A7%87%E0%A6%AC-%E0%A6%A1%E0%A6%BF%E0%A6%9C%E0%A6%BE%E0%A6%87%E0%A6%A8-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BF%E0%A6%A4%E0%A6%BF-%E0%A6%8F%E0%A6%AC%E0%A6%82-html "> <span class="badge badge-light fs-8 mb-0 mt-3 text-dark fw-normal text-hover-primary">ওয়েব ডিজাইন পরিচিতি এবং HTML</span> </a> </div>  </div>   <div class="card-footer py-2 px-0 m-0 footer-div"> <div class="d-flex justify-content-between align-items-center"> <div class="description-btn"> <span class="fs-5 fw-bold text-black cursor-pointer show-des"> <a href="javascript:void(0)" class="me-2 px-4 fw-bolder getDescription" data-id="75187" data-type="mcq"> Des <i class="fas fa-caret-right fa-2xl" style="font-size: 16px"></i> <span class="indicator-progress ms-4 mt-3 mt-mb-0">Please Wait <span class="spinner-border spinner-border-sm align-middle ms-2"></span> </span> </a> </span> </div> <div class="activity "> <div class="d-flex align-items-center justify-content-end flex-wrap"> <a href="javascript:void(0)" class="vote custom-text-gray me-md-10 me-7 fw-bolder fs-5" data-id="75187" data-vote_id="" data-type="mcq"> <i class="fas fa-heart fs-7 me-1 "></i> <span class="vote_value fs-7"> 1 </span> </a> <span class="me-7 me-md-10 fs-7 fw-bolder custom-text-gray" style="cursor:default"> <i class="fas fa-eye fs-7 me-1"></i> 1.1k </span> <a href="javascript:void(0)" class="share pe-4"> <i class="fas fa-share-alt text-primary fs-7"></i> </a> </div> </div> </div> <div class="all-description d-none px-2"> </div> </div> </div>  <div class="card card-bordered rounded mb-5 ">  <div class="card-header pt-2 mx-0 px-2"> <div class="card-title fw-bold cursor-pointer mb-0"> <a href=" https://sattacademy.com/mcq/html-%E0%A6%95%E0%A7%80-%E0%A6%95%E0%A6%BE%E0%A6%9C%E0%A7%87-%E0%A6%AC%E0%A7%8D%E0%A6%AF%E0%A6%AC%E0%A6%B9%E0%A6%BE%E0%A6%B0-%E0%A6%95%E0%A6%B0%E0%A6%BE-%E0%A6%B9%E0%A7%9F " class="text-dark text-hover-primary fw-bolder"> <div class="p-0 m-0 fs-3 text-dark d-flex align-items-start question-card-div"> <span class="me-1" style="white-space: nowrap"> 5 .</span> <div class="d-flex align-items-center justify-content-between"> <span class="question-span p-mb-0 white-heading">HTML কী কাজে ব্যবহার করা হয়? </span> </div> </div> </a> </div> <div class="d-flex align-items-center justify-content-between w-100 toolbar-div "> <div class="p-0"> <div class="destop d-none d-md-block"> <span class="fs-9 fs-md-8 text-muted "> Created: 6 years ago | </span> <span class="fs-9 fs-md-8 text-muted"> Updated: 5 months ago </span> </div> <div class="mobile d-md-none"> <span class="fs-9 fs-md-8 text-muted"> Updated: 5 months ago </span> </div> </div> </div> </div>   <div class="card-body pb-3 pt-5 fs-md-5 parent-card-body">    <input type="hidden" name="active_mode" value="reading">  <div class="reading-mode-data "> <div class="row" style="word-break: break-word;"> <div class="col-md-6 mb-3"> <div class="text-dark fs-4"> <div class="d-flex align-items-start"> <span class="me-2"> <i class="fas fa-dot-circle text-dark"> </i> </span> <div> <span class="overflow-auto scroll-bar-none"> <label for="kkradio_option1_70773"> গ্রাফিক্স ডিজাইন </label> </span> </div> </div> </div> </div> <div class="col-md-6 mb-3"> <div class="text-dark fs-3"> <div class="d-flex align-items-start"> <span class="me-2"> <i class="fas fa-check-circle sa-success fs-3"> </i> </span> <div> <span class="overflow-auto scroll-bar-none"> <label for="kkradio_option2_70773"> ওয়েবসাইট ডিজাইনে </label> </span> </div> </div> </div> </div> <div class="col-md-6 mb-3"> <div class="text-dark fs-4"> <div class="d-flex align-items-start"> <span class="me-2"> <i class="fas fa-dot-circle text-dark"> </i> </span> <div> <span class="overflow-auto scroll-bar-none"> <label for="kkradio_option3_70773"> টেবিল ডিজাইনে </label> </span> </div> </div> </div> </div> <div class="col-md-6 mb-3"> <div class="text-dark fs-4"> <div class="d-flex align-items-start"> <span class="me-2"> <i class="fas fa-dot-circle text-dark"> </i> </span> <div> <span class="overflow-auto scroll-bar-none"> <label for="kkradio_option4_70773"> চার্ট ডিজাইনে </label> </span> </div> </div> </div> </div> </div> </div> <div class="test-mode-data d-none"> <div class="row parent-row"> <input type="hidden" name="answer" value="2"> <div class="col-md-6 mb-1"> <div class="text-dark cursor-pointer click-option fs-5 option-1-text" data-id="70773" data-option_value="1"> <span class="d-flex"> <span class="me-2"><i class="fas fa-dot-circle text-dark option-1"></i></span> <span class="overflow-auto scroll-bar-none"> গ্রাফিক্স ডিজাইন </span> </span> </div> </div> <div class="col-md-6 mb-1"> <div class=" text-dark cursor-pointer click-option fs-5 option-2-text" data-id="70773" data-option_value="2"> <span class="d-flex"> <span class="me-2"><i class="fas fa-dot-circle text-dark option-2"></i></span> <span class="overflow-auto scroll-bar-none">ওয়েবসাইট ডিজাইনে </span> </span> </div> </div> <div class="col-md-6 mb-1"> <div class=" text-dark cursor-pointer click-option fs-5 option-3-text" data-id="70773" data-option_value="3"> <span class="d-flex"> <span class="me-2"><i class="fas fa-dot-circle text-dark option-3"></i></span> <span class="overflow-auto scroll-bar-none"> টেবিল ডিজাইনে </span> </span> </div> </div> <div class="col-md-6 mb-1"> <div class=" text-dark cursor-pointer click-option fs-5 option-4-text" data-id="70773" data-option_value="4"> <span class="d-flex"> <span class="me-2"><i class="fas fa-dot-circle text-dark option-4"></i></span> <span class="overflow-auto scroll-bar-none"> চার্ট ডিজাইনে </span> </span> </div> </div> <div class="col-md-6 mb-1"> </div> </div> </div>     <div class="px-0 overflow-auto tag-div " style="margin: 0px -4px"> <a href=" https://sattacademy.com/job-solution/mcq/%E0%A6%AA%E0%A7%87%E0%A6%9F%E0%A7%8D%E0%A6%B0%E0%A7%8B%E0%A6%AC%E0%A6%BE%E0%A6%82%E0%A6%B2%E0%A6%BE-%E0%A6%B9%E0%A6%BF%E0%A6%B8%E0%A6%BE%E0%A6%AC-%E0%A6%B8%E0%A6%B9%E0%A6%95%E0%A6%BE%E0%A6%B0%E0%A7%80-%E0%A7%A8%E0%A7%AC-%E0%A7%A6%E0%A7%AD-%E0%A7%A8%E0%A7%A6%E0%A7%A7%E0%A7%AF/all "> <span class="badge badge-light fs-8 mb-0 mt-3 text-dark fw-normal text-hover-primary">পেট্রোবাংলা হিসাব সহকারী ২৬.০৭.২০১৯</span> </a> <a href=" https://sattacademy.com/job-solution/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/mcq "> <span class="badge badge-light fs-8 mb-0 mt-3 text-dark fw-normal text-hover-primary">তথ্য প্রযুক্তি</span> </a> <a href=" https://sattacademy.com/guide/%E0%A6%93%E0%A6%AF%E0%A6%BC%E0%A7%87%E0%A6%AC-%E0%A6%A1%E0%A6%BF%E0%A6%9C%E0%A6%BE%E0%A6%87%E0%A6%A8-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BF%E0%A6%A4%E0%A6%BF-%E0%A6%8F%E0%A6%AC%E0%A6%82-html "> <span class="badge badge-light fs-8 mb-0 mt-3 text-dark fw-normal text-hover-primary">ওয়েব ডিজাইন পরিচিতি এবং HTML</span> </a> </div>  </div>   <div class="card-footer py-2 px-0 m-0 footer-div"> <div class="d-flex justify-content-between align-items-center"> <div class="description-btn"> <span class="fs-5 fw-bold text-black cursor-pointer show-des"> <a href="javascript:void(0)" class="me-2 px-4 fw-bolder getDescription" data-id="70773" data-type="mcq"> Des <i class="fas fa-caret-right fa-2xl" style="font-size: 16px"></i> <span class="indicator-progress ms-4 mt-3 mt-mb-0">Please Wait <span class="spinner-border spinner-border-sm align-middle ms-2"></span> </span> </a> </span> </div> <div class="activity "> <div class="d-flex align-items-center justify-content-end flex-wrap"> <a href="javascript:void(0)" class="vote custom-text-gray me-md-10 me-7 fw-bolder fs-5" data-id="70773" data-vote_id="" data-type="mcq"> <i class="fas fa-heart fs-7 me-1 "></i> <span class="vote_value fs-7"> 3 </span> </a> <span class="me-7 me-md-10 fs-7 fw-bolder custom-text-gray" style="cursor:default"> <i class="fas fa-eye fs-7 me-1"></i> 3.4k </span> <a href="javascript:void(0)" class="share pe-4"> <i class="fas fa-share-alt text-primary fs-7"></i> </a> </div> </div> </div> <div class="all-description d-none px-2"> </div> </div> </div>  <div class="card card-bordered rounded mb-5 ">  <div class="card-header pt-2 mx-0 px-2"> <div class="card-title fw-bold cursor-pointer mb-0"> <a href=" https://sattacademy.com/mcq/a-nonstandard-html-extension-that-causes-scrolling-text-to-appear-as-part-of-a-w " class="text-dark text-hover-primary fw-bolder"> <div class="p-0 m-0 fs-3 text-dark d-flex align-items-start question-card-div"> <span class="me-1" style="white-space: nowrap"> 6 .</span> <div class="d-flex align-items-center justify-content-between"> <span class="question-span p-mb-0 white-heading">A nonstandard HTML extension that causes scrolling text to appear as part of a Web page is : </span> </div> </div> </a> </div> <div class="d-flex align-items-center justify-content-between w-100 toolbar-div "> <div class="p-0"> <div class="destop d-none d-md-block"> <span class="fs-9 fs-md-8 text-muted "> Created: 7 years ago | </span> <span class="fs-9 fs-md-8 text-muted"> Updated: 2 months ago </span> </div> <div class="mobile d-md-none"> <span class="fs-9 fs-md-8 text-muted"> Updated: 2 months ago </span> </div> </div> </div> </div>   <div class="card-body pb-3 pt-5 fs-md-5 parent-card-body">    <input type="hidden" name="active_mode" value="reading">  <div class="reading-mode-data "> <div class="row" style="word-break: break-word;"> <div class="col-md-6 mb-3"> <div class="text-dark fs-4"> <div class="d-flex align-items-start"> <span class="me-2"> <i class="fas fa-dot-circle text-dark"> </i> </span> <div> <span class="overflow-auto scroll-bar-none"> <label for="kkradio_option1_61633"> DHCP </label> </span> </div> </div> </div> </div> <div class="col-md-6 mb-3"> <div class="text-dark fs-4"> <div class="d-flex align-items-start"> <span class="me-2"> <i class="fas fa-dot-circle text-dark"> </i> </span> <div> <span class="overflow-auto scroll-bar-none"> <label for="kkradio_option2_61633"> mask off </label> </span> </div> </div> </div> </div> <div class="col-md-6 mb-3"> <div class="text-dark fs-4"> <div class="d-flex align-items-start"> <span class="me-2"> <i class="fas fa-dot-circle text-dark"> </i> </span> <div> <span class="overflow-auto scroll-bar-none"> <label for="kkradio_option3_61633"> Dhrystone </label> </span> </div> </div> </div> </div> <div class="col-md-6 mb-3"> <div class="text-dark fs-3"> <div class="d-flex align-items-start"> <span class="me-2"> <i class="fas fa-check-circle sa-success fs-3"> </i> </span> <div> <span class="overflow-auto scroll-bar-none"> <label for="kkradio_option4_61633"> marquce </label> </span> </div> </div> </div> </div> </div> </div> <div class="test-mode-data d-none"> <div class="row parent-row"> <input type="hidden" name="answer" value="4"> <div class="col-md-6 mb-1"> <div class="text-dark cursor-pointer click-option fs-5 option-1-text" data-id="61633" data-option_value="1"> <span class="d-flex"> <span class="me-2"><i class="fas fa-dot-circle text-dark option-1"></i></span> <span class="overflow-auto scroll-bar-none">DHCP </span> </span> </div> </div> <div class="col-md-6 mb-1"> <div class=" text-dark cursor-pointer click-option fs-5 option-2-text" data-id="61633" data-option_value="2"> <span class="d-flex"> <span class="me-2"><i class="fas fa-dot-circle text-dark option-2"></i></span> <span class="overflow-auto scroll-bar-none">mask off </span> </span> </div> </div> <div class="col-md-6 mb-1"> <div class=" text-dark cursor-pointer click-option fs-5 option-3-text" data-id="61633" data-option_value="3"> <span class="d-flex"> <span class="me-2"><i class="fas fa-dot-circle text-dark option-3"></i></span> <span class="overflow-auto scroll-bar-none"> Dhrystone </span> </span> </div> </div> <div class="col-md-6 mb-1"> <div class=" text-dark cursor-pointer click-option fs-5 option-4-text" data-id="61633" data-option_value="4"> <span class="d-flex"> <span class="me-2"><i class="fas fa-dot-circle text-dark option-4"></i></span> <span class="overflow-auto scroll-bar-none"> marquce </span> </span> </div> </div> <div class="col-md-6 mb-1"> </div> </div> </div>     <div class="px-0 overflow-auto tag-div " style="margin: 0px -4px"> <a href=" https://sattacademy.com/job-solution/mcq/senior-officer-it-sonalijanatabd-krishibd-development-bank-ltd-30112018/all "> <span class="badge badge-light fs-8 mb-0 mt-3 text-dark fw-normal text-hover-primary">Senior Officer (IT) - Sonali,Janata,BD Krishi,BD Development Bank Ltd - 30.11.2018</span> </a> <a href=" https://sattacademy.com/job-solution/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF/mcq "> <span class="badge badge-light fs-8 mb-0 mt-3 text-dark fw-normal text-hover-primary">তথ্য প্রযুক্তি</span> </a> <a href=" https://sattacademy.com/guide/%E0%A6%93%E0%A6%AF%E0%A6%BC%E0%A7%87%E0%A6%AC-%E0%A6%A1%E0%A6%BF%E0%A6%9C%E0%A6%BE%E0%A6%87%E0%A6%A8-%E0%A6%AA%E0%A6%B0%E0%A6%BF%E0%A6%9A%E0%A6%BF%E0%A6%A4%E0%A6%BF-%E0%A6%8F%E0%A6%AC%E0%A6%82-html "> <span class="badge badge-light fs-8 mb-0 mt-3 text-dark fw-normal text-hover-primary">ওয়েব ডিজাইন পরিচিতি এবং HTML</span> </a> </div>  </div>   <div class="card-footer py-2 px-0 m-0 footer-div"> <div class="d-flex justify-content-between align-items-center"> <div class="description-btn"> <span class="fs-5 fw-bold text-black cursor-pointer show-des"> <a href="javascript:void(0)" class="me-2 px-4 fw-bolder getDescription" data-id="61633" data-type="mcq"> Des <i class="fas fa-caret-right fa-2xl" style="font-size: 16px"></i> <span class="indicator-progress ms-4 mt-3 mt-mb-0">Please Wait <span class="spinner-border spinner-border-sm align-middle ms-2"></span> </span> </a> </span> </div> <div class="activity "> <div class="d-flex align-items-center justify-content-end flex-wrap"> <a href="javascript:void(0)" class="vote custom-text-gray me-md-10 me-7 fw-bolder fs-5" data-id="61633" data-vote_id="" data-type="mcq"> <i class="fas fa-heart fs-7 me-1 "></i> <span class="vote_value fs-7"> 4 </span> </a> <span class="me-7 me-md-10 fs-7 fw-bolder custom-text-gray" style="cursor:default"> <i class="fas fa-eye fs-7 me-1"></i> 738 </span> <a href="javascript:void(0)" class="share pe-4"> <i class="fas fa-share-alt text-primary fs-7"></i> </a> </div> </div> </div> <div class="all-description d-none px-2"> </div> </div> </div> </div> </div> </div> </div> <div class="col-md-4"> <div class="card" style="position:sticky; top:100px; bottom:0px; height: 95vh; overflow: auto;"> <div class="card-body p-7"> <div class="d-flex flex-column flex-lg-row"> <div class="flex-column flex-lg-row-auto w-100"> <div class="mb-15"> <div class="sidebar-title mb-3"> <h4 class="text-dark text-uppercase">Related Question</h4> </div> <div class="mb-7" style=" height: 2px; background-color: #ccc;"></div> <div class="menu menu-column menu-state-title-primary fs-6 fw-bold"> <div class="menu-item mb-2"> <a href="https://sattacademy.com/job-solution/mcq/default-port-for-http" class="menu-link text-dark py-3 d-block"> Default port for HTTP?</a> </div> <div class="menu-item mb-2"> <a href="https://sattacademy.com/job-solution/mcq/%E0%A6%A8%E0%A6%BF%E0%A6%9A%E0%A7%87%E0%A6%B0-%E0%A6%95%E0%A7%8B%E0%A6%A8%E0%A6%9F%E0%A6%BF-%E0%A6%95%E0%A6%AE%E0%A7%8D%E0%A6%AA%E0%A6%BF%E0%A6%89%E0%A6%9F%E0%A6%BE%E0%A6%B0%E0%A7%87%E0%A6%B0-%E0%A6%8F%E0%A6%95%E0%A6%9F%E0%A6%BF-%E0%A6%AE%E0%A6%BE%E0%A6%B0%E0%A7%8D%E0%A6%95%E0%A6%86%E0%A6%AA-%E0%A6%AD%E0%A6%BE%E0%A6%B7%E0%A6%BE-57491" class="menu-link text-dark py-3 d-block"> নিচের কোনটি কম্পিউটারের একটি মার্কআপ ভাষা?</a> </div> <div class="menu-item mb-2"> <a href="https://sattacademy.com/job-solution/mcq/the-newest-version-of-html-is" class="menu-link text-dark py-3 d-block"> The newest version of HTML is?</a> </div> <div class="menu-item mb-2"> <a href="https://sattacademy.com/job-solution/mcq/what-is-the-correct-html-tag-for-columns-in-a-table" class="menu-link text-dark py-3 d-block"> What is the correct HTML tag for columns in a table</a> </div> <div class="menu-item mb-2"> <a href="https://sattacademy.com/job-solution/mcq/html-%E0%A6%95%E0%A7%80-%E0%A6%95%E0%A6%BE%E0%A6%9C%E0%A7%87-%E0%A6%AC%E0%A7%8D%E0%A6%AF%E0%A6%AC%E0%A6%B9%E0%A6%BE%E0%A6%B0-%E0%A6%95%E0%A6%B0%E0%A6%BE-%E0%A6%B9%E0%A7%9F" class="menu-link text-dark py-3 d-block"> HTML কী কাজে ব্যবহার করা হয়? </a> </div> <div class="menu-item mb-2"> <a href="https://sattacademy.com/job-solution/mcq/a-nonstandard-html-extension-that-causes-scrolling-text-to-appear-as-part-of-a-w" class="menu-link text-dark py-3 d-block"> A nonstandard HTML extension that causes scrolling text to appear as part of a Web page is : </a> </div> </div> </div> <a href="https://sattacademy.com/e-question-builder" class="eqb-promo-text"> <span class="eqb-promo-main">মাত্র ১৫ পয়সায় প্রশ্নপত্র</span> <span class="eqb-promo-highlight">তৈরি করুন আজই || E-Question Builder</span> </a> <div class="mb-0"> <div id="sidebar-promotion-content"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div>  <div class="modal fade" id="kk_modal_new_bookmark" tabindex="-1" aria-hidden="true">  <div class="modal-dialog modal-dialog-centered mw-600px">  <div class="modal-content rounded">  <div class="modal-header pb-0 border-0 justify-content-end">  <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">  <span class="svg-icon svg-icon-1"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="black" /> <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="black" /> </svg> </span>  </div>  </div>   <div class="modal-body scroll-y px-10 px-lg-15 pt-0 pb-15">  <form id="kk_modal_new_bookmark_form" class="form" method="POST" enctype="multipart/form-data">  <input type="hidden" name="_token" value="eCB19NbixLlgKCphwHwDaE2TL8M7bdLJd4vfiXv8" autocomplete="off"> <input type="hidden" name="question_id"> <input type="hidden" name="catid"> <input type="hidden" name="type">  <div class="mb-13 text-center">  <h4 class="mb-3">Add New Bookmark</h4>   <div class="text-muted fw-bold fs-7">Fill up the form and submit </div>  </div>  <div class="messages text-center fw-bold"></div> <div class="text-center mb-9"> <span class="fs-4 fw-bold">To add a bookmark, please login first. <a href="https://sattacademy.com/login" class="text-decoration-underline">click here to login</a></span> </div>  <div class="text-center"> <button type="reset" id="kk_modal_bookmark_cancel" class="btn btn-light me-3 ">Cancel</button> <a href="https://sattacademy.com/login" class="btn btn-primary"> Login </a> </div>  </form>  </div>  </div>  </div>  </div>   <div class="modal fade" id="kk_modal_add_tag" tabindex="-1" aria-hidden="true">  <div class="modal-dialog modal-dialog-centered mw-650px">  <div class="modal-content rounded">  <div class="modal-header pb-0 border-0 justify-content-end">  <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">  <span class="svg-icon svg-icon-1"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="black" /> <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="black" /> </svg> </span>  </div>  </div>   <div class="modal-body scroll-y px-10 px-lg-15 pt-0 pb-15">  <div class="mb-9 text-center">  <h3 class="mb-3">Add Tag</h3>   <div class="text-muted fw-bold fs-7">Search tag and check the checkbox</div>  </div>  <div class="messages text-center fw-bold"></div>   <div class="tag-div_2"> </div> <input type="hidden" name="question_id"> <input type="hidden" name="subject_id"> <input type="hidden" name="type"> <div class="text-center mb-9"> <span class="fs-4 fw-bold">To add a tag, please login first. <a href="https://sattacademy.com/login" class="text-decoration-underline">click here to login</a></span> </div>  <div class="text-center mt-9"> <button id="kk_modal_tag_close" class="btn btn-light btn-active-danger me-3">Cancel</button> <a href="https://sattacademy.com/login" class="btn btn-primary"> Login </a> </div>  </div>  </div>  </div>  </div>  <div class="modal fade" id="kk_modal_new_question_des" tabindex="-1" aria-hidden="true">  <div class="modal-dialog modal-dialog-centered mw-700px">  <div class="modal-content rounded">  <div class="modal-header pb-0 border-0 justify-content-end">  <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">  <span class="svg-icon svg-icon-1"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="black" /> <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="black" /> </svg> </span>  </div>  </div>   <div class="modal-body scroll-y px-10 px-lg-15 pt-0 pb-15">  <form id="kk_modal_new_question_des_form" class="form" enctype="multipart/form-data">   <input type="hidden" name="_token" value="eCB19NbixLlgKCphwHwDaE2TL8M7bdLJd4vfiXv8" autocomplete="off"> <input type="hidden" name="question_id"> <input type="hidden" name="type">  <div class="mb-13 text-center">  <h4 class="mb-3">Add New Description</h4>   <div class="text-muted fw-bold fs-7">Fill up the form and submit </div>  </div>   <div class="messages col-md-12 mx-auto fw-bolder text-center mb-3"></div>   <div class="d-flex flex-column mb-8 fv-row">  <label class="d-flex align-items-center fs-6 fw-bold mb-2"> <span>Short Description</span> </label>  <textarea name="short_description" class="form-control form-control-solid"></textarea> <div class="help-block with-errors short_description-error"></div> </div>   <div class="d-flex flex-column mb-8 fv-row">  <label class="d-flex align-items-center fs-6 fw-bold mb-2"> <span class="required">Des.</span> </label>  <textarea name="description" id="kt_docs_ckeditor_classic" class="form-control form-control-solid"></textarea> <div class="help-block with-errors description-error"></div> </div>  <div class="text-center mb-9"> <span class="fs-4 fw-bold">To add a description please, login first. <a href="https://sattacademy.com/login" class="text-decoration-underline">click here to login</a></span> </div>  <div class="text-center"> <button type="reset" id="kk_modal_add_description_cancel" class="btn btn-light me-3">Cancel</button> <a href="https://sattacademy.com/login" class="btn btn-primary"> profile.login </a> </div>  </form>  </div>  </div>  </div>  </div> <div class="modal fade" id="kk_modal_add_video" tabindex="-1" aria-hidden="true">  <div class="modal-dialog modal-dialog-centered mw-650px">  <div class="modal-content rounded">  <div class="modal-header pb-0 border-0 justify-content-end">  <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">  <span class="svg-icon svg-icon-1"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="black" /> <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="black" /> </svg> </span>  </div>  </div>   <div class="modal-body scroll-y px-10 px-lg-15 pt-0 pb-15">  <form id="kk_modal_new_video_form" class="form" enctype="multipart/form-data">  <input type="hidden" name="_token" value="eCB19NbixLlgKCphwHwDaE2TL8M7bdLJd4vfiXv8" autocomplete="off">  <input type="hidden" name="data_id"> <input type="hidden" name="type">   <div class="mb-13 text-center">  <h3 class="mb-3">Add Video</h3>   <div class="text-muted fw-bold fs-7">Fill up the form and submit </div>  </div>   <div class="messages text-center fw-bold"></div>  <div class="text-center mb-9"> <span class="fs-4 fw-bold">To add a video, please login first. <a href="https://sattacademy.com/login" class="text-decoration-underline">click here to login</a></span> </div>  <div class="text-center"> <button type="reset" id="kk_modal_add_video_cancel" class="btn btn-light me-3 ">Cancel</button> <a href="https://sattacademy.com/login" class="btn btn-primary"> Login </a> </div>  </form>  </div>  </div>  </div>  </div> <div class="modal fade" id="kk_modal_show_video" tabindex="-1" aria-hidden="true"> <div id="video_data"></div> </div> <div class="modal fade" id="kk_edit_question_modal" tabindex="-1" aria-hidden="true"> <div id="edit_question_data"></div> </div> <div class="modal fade" id="kk_modal_edit_description" tabindex="-1" aria-hidden="true">  <div class="modal-dialog modal-dialog-centered mw-750px">  <div class="modal-content rounded">  <div class="modal-header pb-0 border-0 justify-content-end">  <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">  <span class="svg-icon svg-icon-1"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="black" /> <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="black" /> </svg> </span>  </div>  </div>   <div class="modal-body scroll-y px-10 px-lg-15 pt-0 pb-15">  <form id="kk_modal_edit_description_form" class="form" enctype="multipart/form-data">  <input type="hidden" name="_token" value="eCB19NbixLlgKCphwHwDaE2TL8M7bdLJd4vfiXv8" autocomplete="off">  <input type="hidden" name="description_id">  <input type="hidden" name="question_id"> <input type="hidden" name="type">  <div class="mb-13 text-center">  <h4 class="mb-3">Update Description</h4>   <div class="text-muted fw-bold fs-7">Fill up the form and submit </div>  </div>   <div class="messages col-md-12 mx-auto fw-bolder text-center mb-3"></div>   <div class="d-flex flex-column mb-8 fv-row">  <label class="d-flex align-items-center fs-6 fw-bold mb-2"> <span class="reply">Short Descrption</span> </label>  <textarea name="short_description" class="form-control form-control-solid"></textarea> <div class="help-block with-errors short_description-error"></div> </div>   <div class="d-flex flex-column mb-8 fv-row">  <label class="d-flex align-items-center fs-6 fw-bold mb-2"> <span class="required reply">Des.</span> </label>  <textarea name="description" class="form-control form-control-solid ckeditor_classic2"></textarea> <div class="help-block with-errors description-error"></div> </div>  <div class="text-center mb-9"> <span class="fs-4 fw-bold">Please, login first. <a href="https://sattacademy.com/login" class="text-decoration-underline">click here to login</a></span> </div>  <div class="text-center"> <button type="reset" id="kk_modal_edit_description_cancel" class="btn btn-light me-3">Cancel</button> <a href="https://sattacademy.com/login" class="btn btn-primary"> Login </a> </div>  </form>  </div>  </div>  </div>  </div> <div class="modal fade" id="kk_modal_edit_passage" tabindex="-1" aria-hidden="true"> <div id="edit_passage"></div> </div> <div class="modal fade" id="kk_modal_error_report" tabindex="-1" aria-hidden="true">  <div class="modal-dialog modal-dialog-centered mw-650px">  <div class="modal-content rounded">  <div class="modal-header pb-0 border-0 justify-content-end">  <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">  <span class="svg-icon svg-icon-1"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="black" /> <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="black" /> </svg> </span>  </div>  </div>   <div class="modal-body scroll-y px-10 px-lg-15 pt-0 pb-15">  <form id="kk_modal_error_report_form" class="form" enctype="multipart/form-data"> <div class="messages"></div>  <input type="hidden" name="_token" value="eCB19NbixLlgKCphwHwDaE2TL8M7bdLJd4vfiXv8" autocomplete="off">  <div class="mb-13 text-center">  <h4 class="mb-3">Error Report</h4>   <div class="text-muted fw-bold fs-7">Fill up the form and submit </div>  </div>   <input type="hidden" name="id" value=""> <input type="hidden" name="type" value="">  <div class="text-center mb-9"> <span class="fs-4 fw-bold">To report an error please, login first. <a href="https://sattacademy.com/login" class="text-decoration-underline">click here to login</a></span> </div>  <div class="text-center"> <button type="reset" id="kk_modal_error_report_cancel" class="btn btn-light me-3">Close</button> <a href="https://sattacademy.com/login" class="btn btn-primary"> Login </a> </div>  </form>  </div>  </div>  </div>  </div>  <div class="container"> </div>  <div id="footer-promotion-content"></div>  </div>    <div class="footer pt-10 pb-0" id="kt_footer">  <div class="footer-bg">  <div class="container">  <div class="d-flex align-items-md-center justify-content-center py-3">  <a class="text-light fw-bold fs-7" href="https://sattacademy.com">©2026 Satt Academy. All rights reserved.</a> </div>  </div>  </div>  </div>    <div class="modal fade" tabindex="-1" id="satt_dynamic_modal">  <div class="modal-dialog modal-dialog-centered mw-600px"> <div class="modal-content" style="background-color: transparent">  <button type="button" class="promotion-close-btn promotion-modal-close-btn" data-bs-dismiss="modal" aria-label="Close"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"> <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor"></rect> <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor"></rect> </svg> </button>  <div class="dynamic-modal-body promotion-body"> </div> </div> </div> </div>   <div class="offcanvas" tabindex="-1" id="satt_dynamic_offcanvas" aria-labelledby="offcanvasLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasLabel">Promotion</h5> <button type="button" class="btn-close promotion-close-btn" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body promotion-body" id="dynamic_offcanvas_body"> </div> </div>   <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script> <script src="https://sattacademy.com/vendor/livewire/livewire.min.js?id=918b9ea9" data-csrf="eCB19NbixLlgKCphwHwDaE2TL8M7bdLJd4vfiXv8" data-update-uri="/livewire/update" data-navigate-once="true"></script>  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"> </script> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <script src="https://sattacademy.com/custom/js/jquery.meanmenu.min.js"></script> <style> .swal2-container.swal2-center>.swal2-popup { padding: 20px !important; } div:where(.swal2-container) div:where(.swal2-actions) { gap: 12px; } span.alert_satt_title { position: absolute; top: 16px; left: 0; right: 0; font-size: 1.5rem; font-weight: 600; text-transform: uppercase; } /* .swal2-popup .swal2-title { margin-bottom: -20px; } */ .swal2-close { margin-top: -18px !important; } </style> <script> function restrict(data) { var globalPackagePlans = [{"id":17,"package_id":5,"name":"S-BASIC","package_type":"student","monthly_price":150,"yearly_price":1000,"monthly_discount":21,"yearly_discount":601,"discount_type":"fixed","description":null,"status":"active","created_by":1,"updated_by":112262,"created_at":"2024-11-12T03:03:26.000000Z","updated_at":"2025-11-23T05:59:29.000000Z","deleted_at":null},{"id":18,"package_id":5,"name":"S-PLUS","package_type":"student","monthly_price":250,"yearly_price":2500,"monthly_discount":71,"yearly_discount":2001,"discount_type":"fixed","description":null,"status":"active","created_by":1,"updated_by":112262,"created_at":"2024-11-12T03:04:38.000000Z","updated_at":"2025-11-23T06:00:04.000000Z","deleted_at":null},{"id":19,"package_id":5,"name":"S-PRO","package_type":"student","monthly_price":400,"yearly_price":4000,"monthly_discount":171,"yearly_discount":3301,"discount_type":"fixed","description":null,"status":"active","created_by":1,"updated_by":112262,"created_at":"2024-11-12T03:06:34.000000Z","updated_at":"2025-11-23T06:00:48.000000Z","deleted_at":null}]; // show alert if subscriptions need if (data.need_subscribe == true) { hideSpinner(); Swal.fire({ title: '<p class="mb-0"><b class="text-warning">Free limit exceeded!</b></p><p class="mb-0 fs-6">Subscribe for unlimited access!</p>', icon: "warning", showDenyButton: true, showCancelButton: true, confirmButtonText: "View Details", denyButtonText: `Not Now!`, html: ` <div x-data="{ activeTab: 'yearly' }" class="restrictCard"> <span class="alert_satt_title">SATT Academy</span>  <ul class="nav nav-tabs justify-content-center" role="tablist"> <li class="nav-item"> <a class="nav-link" :class="{ 'active': activeTab === 'monthly' }" @click.prevent="activeTab = 'monthly'" href="#">Monthly</a> </li> <li class="nav-item"> <a class="nav-link" :class="{ 'active': activeTab === 'yearly' }" @click.prevent="activeTab = 'yearly'" href="#">Yearly</a> </li> </ul>  <div class="tab-content"> <div id="monthly" x-show="activeTab === 'monthly'" class="container tab-pane active"><br> <div class="table-responsive"> <table class="table" style="border: 1px solid black;"> <thead class="restrict-thead text-dark rounded"> <tr class="text-center" style="border: 1px solid black;"> <th class="ps-2">Package</th> <th>Price</th> <th>Action</th> </tr> </thead> <tbody> ${globalPackagePlans.map(plan => ` <tr style="border: 1px solid black;"> <td>${plan.name}</td> <td> <span class="text-muted text-decoration-line-through fs-7">${plan.monthly_price}</span> <span class="fw-bolder text-success fs-5">${ (plan.discount_type === 'fixed' ? plan.monthly_price - plan.monthly_discount : (plan.monthly_price - (plan.monthly_price/100)*plan.monthly_discount ) )}৳</span> </td> <td> <div class="mt-n6 d-flex gap-3"> <form action="https://sattacademy.com/subscribe" method="post"> <input type="hidden" name="_token" value="eCB19NbixLlgKCphwHwDaE2TL8M7bdLJd4vfiXv8" autocomplete="off"> <input type="hidden" name="id" value="${plan.id}"/> <input type="hidden" name="type" value="plan"/> <input type="hidden" name="month_year" value="month"/> <button type="submit" class="btn btn-green text-white btn-sm ">Subscribe</button> </form> <a href="https://sattacademy.com/packages" class="btn btn-details text-white btn-sm d-none d-md-block">View Details</a> </div> </td> </tr> `).join('')} </tbody> </table> </div> </div> <div id="yearly" x-show="activeTab === 'yearly'" class="container tab-pane active"><br> <div class="table-responsive"> <table class="table" style="border: 1px solid black;"> <thead class="restrict-thead bg-secondary text-dark rounded"> <tr class="text-center" style="border: 1px solid black;"> <th class="ps-2">Package</th> <th>Price</th> <th>Action</th> </tr> </thead> <tbody> ${globalPackagePlans.map(plan => ` <tr style="border: 1px solid black;"> <td>${plan.name}</td> <td> <span class="text-muted text-decoration-line-through fs-7">${plan.yearly_price}</span> <span class="fw-bolder text-success fs-5">${ (plan.discount_type === 'fixed' ? plan.yearly_price - plan.yearly_discount : (plan.yearly_price - (plan.yearly_price/100)*plan.yearly_discount ) )}৳</span> </td> <td> <div class="mt-n6 d-flex gap-3"> <form action="https://sattacademy.com/subscribe" method="post"> <input type="hidden" name="_token" value="eCB19NbixLlgKCphwHwDaE2TL8M7bdLJd4vfiXv8" autocomplete="off"> <input type="hidden" name="id" value="${plan.id}"/> <input type="hidden" name="type" value="plan"/> <input type="hidden" name="month_year" value="year"/> <button type="submit" class="btn btn-green text-white btn-sm ">Subscribe</button> </form> <a href="https://sattacademy.com/packages" class="btn btn-details text-white btn-sm d-none d-md-block">View Details</a> </div> </td> </tr> `).join('')} </tbody> </table> </div> </div> </div> </div> `, width: '570px', heightAuto: true, customClass: { popup: 'swal-height', confirmButton: 'btn-green', }, showCloseButton: true }).then((result) => { if (result.isConfirmed) { Swal.fire("Redirecting to package plan page...", "", "success"); window.location.href = "/packages"; } else if (result.isDenied) { Swal.fire("Thanks, But if you want this service you need to subscribe", "", "info"); } }); } else if (data.need_login == true) { hideSpinner(); Swal.fire({ title: data.message?.title ?? "Login to continue...", text: data.message?.body ?? "If you need more content, you need to login", icon: "warning", showDenyButton: true, showCancelButton: true, confirmButtonText: "Login Now", denyButtonText: `Not Now!` }).then((result) => { /* Read more about isConfirmed, isDenied below */ if (result.isConfirmed) { Swal.fire("Redirecting to login page...", "", "success"); // if user want to subscribe then redirect to package plan page window.location.href = "/login"; } else if (result.isDenied) { Swal.fire("Thanks, But if you need more content, you need to login", "", "info"); } }); hideSpinner(); } else { hideSpinner(); window.scrollTo({ top: 0, behavior: 'smooth' }); MathJax.Hub.Typeset(); } } // subscribe alert function hideSpinner() { $("#spinner-gif").hide(); $("#spinner-gif_1").hide(); $("#spinner-gif_2").hide(); $("#spinner-gif_3").hide(); $("#spinner-gif_4").hide(); $("#spinner-gif_5").hide(); $('.indicator-label').show(); $('.indicator-progress').hide(); $('#kk_modal_new_service_submit').removeAttr('disabled'); } function activeTab() { // active, inactive tab $(document).on('click', '.subject-list-nav li button', function(e) { e.preventDefault(); $('.subject-list-nav li button').removeClass('active'); $(this).addClass('active'); }); } </script> <script> /**** Livewire Alert Scripts ****/ (()=>{var __webpack_modules__={757:(e,t,r)=>{e.exports=r(666)},666:e=>{var t=function(e){"use strict";var t,r=Object.prototype,n=r.hasOwnProperty,o="function"==typeof Symbol?Symbol:{},i=o.iterator||"@@iterator",a=o.asyncIterator||"@@asyncIterator",c=o.toStringTag||"@@toStringTag";function s(e,t,r){return Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}),e[t]}try{s({},"")}catch(e){s=function(e,t,r){return e[t]=r}}function l(e,t,r,n){var o=t&&t.prototype instanceof y?t:y,i=Object.create(o.prototype),a=new x(n||[]);return i._invoke=function(e,t,r){var n=f;return function(o,i){if(n===_)throw new Error("Generator is already running");if(n===d){if("throw"===o)throw i;return S()}for(r.method=o,r.arg=i;;){var a=r.delegate;if(a){var c=L(a,r);if(c){if(c===h)continue;return c}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if(n===f)throw n=d,r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);n=_;var s=u(e,t,r);if("normal"===s.type){if(n=r.done?d:p,s.arg===h)continue;return{value:s.arg,done:r.done}}"throw"===s.type&&(n=d,r.method="throw",r.arg=s.arg)}}}(e,r,a),i}function u(e,t,r){try{return{type:"normal",arg:e.call(t,r)}}catch(e){return{type:"throw",arg:e}}}e.wrap=l;var f="suspendedStart",p="suspendedYield",_="executing",d="completed",h={};function y(){}function v(){}function b(){}var m={};s(m,i,(function(){return this}));var w=Object.getPrototypeOf,g=w&&w(w(D([])));g&&g!==r&&n.call(g,i)&&(m=g);var O=b.prototype=y.prototype=Object.create(m);function E(e){["next","throw","return"].forEach((function(t){s(e,t,(function(e){return this._invoke(t,e)}))}))}function k(e,t){function r(o,i,a,c){var s=u(e[o],e,i);if("throw"!==s.type){var l=s.arg,f=l.value;return f&&"object"==typeof f&&n.call(f,"__await")?t.resolve(f.__await).then((function(e){r("next",e,a,c)}),(function(e){r("throw",e,a,c)})):t.resolve(f).then((function(e){l.value=e,a(l)}),(function(e){return r("throw",e,a,c)}))}c(s.arg)}var o;this._invoke=function(e,n){function i(){return new t((function(t,o){r(e,n,t,o)}))}return o=o?o.then(i,i):i()}}function L(e,r){var n=e.iterator[r.method];if(n===t){if(r.delegate=null,"throw"===r.method){if(e.iterator.return&&(r.method="return",r.arg=t,L(e,r),"throw"===r.method))return h;r.method="throw",r.arg=new TypeError("The iterator does not provide a 'throw' method")}return h}var o=u(n,e.iterator,r.arg);if("throw"===o.type)return r.method="throw",r.arg=o.arg,r.delegate=null,h;var i=o.arg;return i?i.done?(r[e.resultName]=i.value,r.next=e.nextLoc,"return"!==r.method&&(r.method="next",r.arg=t),r.delegate=null,h):i:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,h)}function j(e){var t={tryLoc:e[0]};1 in e&&(t.catchLoc=e[1]),2 in e&&(t.finallyLoc=e[2],t.afterLoc=e[3]),this.tryEntries.push(t)}function P(e){var t=e.completion||{};t.type="normal",delete t.arg,e.completion=t}function x(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(j,this),this.reset(!0)}function D(e){if(e){var r=e[i];if(r)return r.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var o=-1,a=function r(){for(;++o<e.length;)if(n.call(e,o))return r.value=e[o],r.done=!1,r;return r.value=t,r.done=!0,r};return a.next=a}}return{next:S}}function S(){return{value:t,done:!0}}return v.prototype=b,s(O,"constructor",b),s(b,"constructor",v),v.displayName=s(b,c,"GeneratorFunction"),e.isGeneratorFunction=function(e){var t="function"==typeof e&&e.constructor;return!!t&&(t===v||"GeneratorFunction"===(t.displayName||t.name))},e.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,b):(e.__proto__=b,s(e,c,"GeneratorFunction")),e.prototype=Object.create(O),e},e.awrap=function(e){return{__await:e}},E(k.prototype),s(k.prototype,a,(function(){return this})),e.AsyncIterator=k,e.async=function(t,r,n,o,i){void 0===i&&(i=Promise);var a=new k(l(t,r,n,o),i);return e.isGeneratorFunction(r)?a:a.next().then((function(e){return e.done?e.value:a.next()}))},E(O),s(O,c,"Generator"),s(O,i,(function(){return this})),s(O,"toString",(function(){return"[object Generator]"})),e.keys=function(e){var t=[];for(var r in e)t.push(r);return t.reverse(),function r(){for(;t.length;){var n=t.pop();if(n in e)return r.value=n,r.done=!1,r}return r.done=!0,r}},e.values=D,x.prototype={constructor:x,reset:function(e){if(this.prev=0,this.next=0,this.sent=this._sent=t,this.done=!1,this.delegate=null,this.method="next",this.arg=t,this.tryEntries.forEach(P),!e)for(var r in this)"t"===r.charAt(0)&&n.call(this,r)&&!isNaN(+r.slice(1))&&(this[r]=t)},stop:function(){this.done=!0;var e=this.tryEntries[0].completion;if("throw"===e.type)throw e.arg;return this.rval},dispatchException:function(e){if(this.done)throw e;var r=this;function o(n,o){return c.type="throw",c.arg=e,r.next=n,o&&(r.method="next",r.arg=t),!!o}for(var i=this.tryEntries.length-1;i>=0;--i){var a=this.tryEntries[i],c=a.completion;if("root"===a.tryLoc)return o("end");if(a.tryLoc<=this.prev){var s=n.call(a,"catchLoc"),l=n.call(a,"finallyLoc");if(s&&l){if(this.prev<a.catchLoc)return o(a.catchLoc,!0);if(this.prev<a.finallyLoc)return o(a.finallyLoc)}else if(s){if(this.prev<a.catchLoc)return o(a.catchLoc,!0)}else{if(!l)throw new Error("try statement without catch or finally");if(this.prev<a.finallyLoc)return o(a.finallyLoc)}}}},abrupt:function(e,t){for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===e||"continue"===e)&&i.tryLoc<=t&&t<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=e,a.arg=t,i?(this.method="next",this.next=i.finallyLoc,h):this.complete(a)},complete:function(e,t){if("throw"===e.type)throw e.arg;return"break"===e.type||"continue"===e.type?this.next=e.arg:"return"===e.type?(this.rval=this.arg=e.arg,this.method="return",this.next="end"):"normal"===e.type&&t&&(this.next=t),h},finish:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var r=this.tryEntries[t];if(r.finallyLoc===e)return this.complete(r.completion,r.afterLoc),P(r),h}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var r=this.tryEntries[t];if(r.tryLoc===e){var n=r.completion;if("throw"===n.type){var o=n.arg;P(r)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(e,r,n){return this.delegate={iterator:D(e),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=t),h}},e}(e.exports);try{regeneratorRuntime=t}catch(e){"object"==typeof globalThis?globalThis.regeneratorRuntime=t:Function("r","regeneratorRuntime = r")(t)}}},__webpack_module_cache__={};function __webpack_require__(e){var t=__webpack_module_cache__[e];if(void 0!==t)return t.exports;var r=__webpack_module_cache__[e]={exports:{}};return __webpack_modules__[e](r,r.exports,__webpack_require__),r.exports}__webpack_require__.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return __webpack_require__.d(t,{a:t}),t},__webpack_require__.d=(e,t)=>{for(var r in t)__webpack_require__.o(t,r)&&!__webpack_require__.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},__webpack_require__.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var __webpack_exports__={};(()=>{"use strict";var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(757),_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__);function ownKeys(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function _objectSpread(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?ownKeys(Object(r),!0).forEach((function(t){_defineProperty(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):ownKeys(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function _defineProperty(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function asyncGeneratorStep(e,t,r,n,o,i,a){try{var c=e[i](a),s=c.value}catch(e){return void r(e)}c.done?t(s):Promise.resolve(s).then(n,o)}function _asyncToGenerator(e){return function(){var t=this,r=arguments;return new Promise((function(n,o){var i=e.apply(t,r);function a(e){asyncGeneratorStep(i,n,o,a,c,"next",e)}function c(e){asyncGeneratorStep(i,n,o,a,c,"throw",e)}a(void 0)}))}}function evalCallbacksOptions(options){for(var callbacksKeysAllowed=["allowOutsideClick","allowEscapeKey","allowEnterKey","loaderHtml","inputOptions","inputValidator","preConfirm","preDeny","didClose","didDestroy","didOpen","didRender","willClose","willOpen"],_i=0,_callbacksKeysAllowed=callbacksKeysAllowed;_i<_callbacksKeysAllowed.length;_i++){var callbackKey=_callbacksKeysAllowed[_i];options.hasOwnProperty(callbackKey)&&("string"==typeof options[callbackKey]||options[callbackKey]instanceof String)&&options[callbackKey]&&""!=options[callbackKey].trim()&&(options[callbackKey]=eval(options[callbackKey]))}}function afterAlertInteraction(e){if(e.confirmed)return"self"===e.onConfirmed.component?void Livewire.find(e.onConfirmed.id).dispatchSelf(e.onConfirmed.listener,e.result):void Livewire.dispatchTo(e.onConfirmed.component,e.onConfirmed.listener,e.result);if(e.isDenied)return"self"===e.onDenied.component?void Livewire.find(e.onDenied.id).dispatchSelf(e.onDenied.listener,e.result):void Livewire.dispatchTo(e.onDenied.component,e.onDenied.listener,e.result);if(e.onProgressFinished&&e.dismiss===Swal.DismissReason.timer)return"self"===e.onProgressFinished.component?void Livewire.find(e.onProgressFinished.id).dispatchSelf(e.onProgressFinished.listener,e.result):void Livewire.dispatchTo(e.onProgressFinished.component,e.onProgressFinished.listener,e.result);if(e.onDismissed){if("self"===e.onDismissed.component)return void Livewire.find(e.onDismissed.id).dispatch(e.onDismissed.listener,e.result);Livewire.dispatchTo(e.onDismissed.component,e.onDismissed.listener,e.result)}}window.addEventListener("alert",function(){var e=_asyncToGenerator(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark((function e(t){var r,n,o,i,a,c,s,l;return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return o=t.detail.message,i=null!==(r=t.detail.type)&&void 0!==r?r:null,a=t.detail.data,c=t.detail.events,evalCallbacksOptions(s=t.detail.options),e.next=8,Swal.fire(_objectSpread({title:o,icon:i},s));case 8:afterAlertInteraction(_objectSpread(_objectSpread(_objectSpread({confirmed:(l=e.sent).isConfirmed,denied:l.isDenied,dismiss:l.dismiss,result:_objectSpread(_objectSpread({},l),{},{data:_objectSpread(_objectSpread({},a),{},{inputAttributes:null!==(n=s.inputAttributes)&&void 0!==n?n:null})})},c),l),s));case 10:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}()),window.flashAlert=function(){var e=_asyncToGenerator(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark((function e(t){var r,n,o,i,a,c,s;return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return i=t.events,a=t.events.data,evalCallbacksOptions(c=t.options),e.next=6,Swal.fire(_objectSpread({title:null!==(r=t.message)&&void 0!==r?r:"",icon:null!==(n=t.type)&&void 0!==n?n:null},c));case 6:afterAlertInteraction(_objectSpread(_objectSpread({confirmed:(s=e.sent).isConfirmed,denied:s.isDenied,dismiss:s.dismiss,result:_objectSpread(_objectSpread({},s),{},{data:_objectSpread(_objectSpread({},a),{},{inputAttributes:null!==(o=c.inputAttributes)&&void 0!==o?o:null})})},i),t.options));case 8:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}()})()})(); </script> <script> </script> <script> </script>  <script src="https://sattacademy.com/custom/js/globalPage.js"></script>  <script src="https://sattacademy.com/js/custom.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script> <script> </script>  <script type="text/javascript"> //Margin remove function function revomeMargin(){ $('.search-question').find('p').css({ 'margin' : '0px' }); } //Global search $(document).ready(function() { var timeout = null; $(document).on('keyup', '.global-search-input', function() { var this_input = $(this); //console.log(id) clearTimeout(timeout); timeout = setTimeout(() => { var val = $(this).val(); if (val == "") { $('.global-search-spinner').addClass('d-none'); $('#global-search-result').html(''); } //If val is not empty. else { //show spinner $('.global-search-spinner').removeClass('d-none'); //AJAX is called. $.ajax({ type: "POST", url: "https://sattacademy.com/global-search", headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}, data: { //Assigning value of "val" into "search_txt" variable. search_txt: val, }, //If result found, this funtion will be called. success: function(data) { //console.log(data) $('.global-search-spinner').addClass('d-none'); $('#global-search-result').html(data.html); }, complete:function(){ revomeMargin(); } }); } }, 1000); }); $(document).on('click', '#go-to-search', function(){ //console.log('here'); var val = $('.global-search-input').val(); var url = "/search?search="+val; window.location.href = url ; }) }) </script> <script> document.addEventListener('livewire:navigated', () => { $('.sa-avatar').click(function(e) { $('#profile-menu').addClass('d-flex'); }); // Search $('.fa-search').click(function(e) { $('#global-menu').addClass('d-flex'); }); $(document).click(function(e) { if (e.target.id != 'profile-menu' && !e.target.classList.contains('sa-avatar')) { $('#profile-menu').removeClass('d-flex'); } // Search if (e.target.closest('#global-menu') == null && !e.target.classList.contains('fa-search')) { $('#global-menu').removeClass('d-flex'); } }); }); // PWA Loader document.addEventListener('DOMContentLoaded', function() { // Page is loaded, it is safe to hide loading animation document.getElementById('pwa-loader').style.display = 'none'; window.addEventListener('beforeunload', function() { if (window.matchMedia('(display-mode: standalone)').matches) { // User has triggered a navigation, show the loading animation document.getElementById('pwa-loader').style.display = 'block'; } }); }); </script> <script type="text/javascript"> $(document).ready(function() { $('#bookmark_type').select2({ tags: true, dropdownParent: $("#kk_modal_new_bookmark"), maximumSelectionLength: 1 }); }); </script> <script type="text/javascript"> //check mobile device function isMobileDevice() { var check = false; (function(a) { if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i .test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i .test(a.substr(0, 4))) check = true; })(navigator.userAgent || navigator.vendor || window.opera); return check; }; //Toolbar btn **Menu Show Hide**// $(document).ready(function() { $(document).on('click', '.toolbar-btn', function() { $(this).toggleClass('show'); $(this).toggleClass('menu-dropdown'); $(this).closest('div').find('.menu').toggleClass('show'); if (isMobileDevice() == 'false' || isMobileDevice() == false) { $(this).closest('div').find('.menu').css({ 'z-index': '105', 'position': 'absolute', 'margin': '0px', 'inset': '70px 0px auto auto', // 'transform' : 'traslate3d(-30px, 65px, 0px)' }); } else { $(this).closest('div').find('.menu').css({ 'z-index': '105', 'position': 'absolute', 'margin': '0px', 'inset': '170px 15px auto auto', // 'transform' : 'traslate3d(-15px, 55px, 0px)' }); } }); $('#kt_post').on('click', (evt) => { //console.log(evt.target.classList); const hasClass = evt.target.classList.contains('toolbar-btn'); if (!hasClass) { let isVisible = $('.toolbar-btn').siblings('div.menu-sub').is(":visible"); if (isVisible == true) { $('.toolbar-btn').removeClass('show').removeClass('menu-dropdown'); $('.toolbar-btn').closest('div').find('.menu').removeClass('show'); } } }); }); /**###### begin::vote||love ##########**/ $(document).on('click', '.vote', function() { var id = $(this).data('id'); var val = $(this).find('span.vote_value').text(); var type = $(this).data('type'); var click_element = $(this); $.ajax({ type: "GET", url: "https://sattacademy.com/question/vote" + '/' + id + '/' + type, dataType: 'json', success: function(data) { if (data.success) { //console.log(data); click_element.find('span.vote_value').text(parseInt(val) + 1); click_element.find('i.fa-heart').addClass('text-danger'); click_element.removeClass('vote custom-text-gray'); click_element.addClass('undo-vote text-danger'); click_element.data('vote_id', data.vote); //toastr.success(data.message); //toolbar btn chnage on toolbar btn click click_element.parent('div.favorite_btn').find('a').text('Remove Favorite'); click_element.parent('div.favorite_btn').find('a').addClass('undo-vote'); click_element.parent('div.favorite_btn').find('a').removeClass('vote'); } else { toastr.error(data.message); } } }) }); /**####### end::vote ##########**/ /**###### begin::undo vote #######**/ $(document).on('click', '.undo-vote', function() { var id = $(this).data('vote_id'); var question_id = $(this).data('id'); var val = $(this).find('span.vote_value').text(); var type = $(this).data('type'); //console.log(id); var thisbtn = $(this); $.ajax({ type: "GET", url: "https://sattacademy.com/question/undo-vote", data: { 'vote_id': id, 'question_id': question_id, 'type': type }, dataType: 'json', success: function(data) { thisbtn.find('span.vote_value').text(parseInt(val) - 1); thisbtn.find('i.fa-heart').removeClass('text-danger'); thisbtn.removeClass('undo-vote text-danger'); thisbtn.addClass('vote custom-text-gray'); //toolbar btn chnage on toolbar btn click thisbtn.parent('div.favorite_btn').find('a').text('Make Favorite'); thisbtn.parent('div.favorite_btn').find('a').addClass('vote'); thisbtn.parent('div.favorite_btn').find('a').removeClass('undo-vote'); let currentRouteName = 'job.single-question'; if (currentRouteName == 'profile.favourite') thisbtn.closest('div.card.card-bordered').fadeOut(); } }); }) /**##### end::undo vote ########**/ /**#### begin::description like #####**/ $(document).on('click', '.description-like', function() { var id = $(this).data('description_id'); var val = $(this).find('span.des-like').text(); var type = $(this).data('btntype'); var click_element = $(this); $.ajax({ type: "GET", url: "https://sattacademy.com/description/like" + '/' + id, data: { btntype: type }, dataType: 'json', success: function(data) { if (data.success) { click_element.find('span.des-like').text(parseInt(val) + 1); if (type == 'like') { click_element.find('i.fa-thumbs-up').addClass('text-primary'); } else { click_element.find('i.fa-thumbs-down').addClass('text-primary'); } click_element.removeClass('description-like'); click_element.addClass('undo-description-like'); click_element.data('vote_id', data.vote); //toastr.success(data.message); } else { toastr.error(data.message); } } }) }) /**#### end::description like ######**/ /**##### begin::undo-description-like ######**/ $(document).on('click', '.undo-description-like', function() { var id = $(this).data('vote_id'); var description_id = $(this).data('description_id'); var val = $(this).find('span.des-like').text(); var type = $(this).data('btntype'); //console.log(type); var thisbtn = $(this); $.ajax({ type: "GET", url: "https://sattacademy.com/question/undo-description-like", data: { 'vote_id': id, 'description_id': description_id, 'btntype': type }, dataType: 'json', success: function(data) { if (data.success) { thisbtn.removeClass('undo-description-like'); thisbtn.addClass('description-like'); thisbtn.find('span.des-like').text(parseInt(val) - 1); if (type == 'like') { thisbtn.find('i.fa-thumbs-up').removeClass('text-primary'); } else { thisbtn.find('i.fa-thumbs-down').removeClass('text-primary'); } } else { toastr.error(data.message); } } }); }) /**##### end::undo-description-like #####**/ /**begin::Question Edit**/ //edit Question $(document).on('click', '.editQuestion', function() { var id = $(this).data('id'); var question = $(this).data('question'); var type = $(this).data('type'); //console.log(question); Swal.fire({ text: "Are you sure you want to edit this question?", icon: "warning", showCancelButton: !0, buttonsStyling: !1, confirmButtonText: "Confirm", cancelButtonText: "No, cancel", customClass: { confirmButton: "btn fw-bold btn-danger", cancelButton: "btn fw-bold btn-active-light-primary" } }).then((function(o) { if (o.value) { //if agree if (type == 'written') { myEditor3.setData(question); $("input[name='question']").val(question); $("input[name='question_id']").val(id); $("#kk_edit_written_question_modal").modal('show'); // $.ajax({ // type:"GET", // url: "https://sattacademy.com/question/edit-written-question"+'/'+id, // dataType: 'json', // success:function(data){ // $("#edit_question_data").html(data.html); // $("#kk_edit_question_modal").modal('show'); // } // }); } else if (type == 'mcq') { $.ajax({ type: "GET", url: "https://sattacademy.com/question/edit-question" + '/' + id, dataType: 'json', success: function(data) { $("#edit_question_data").html(data.html); $("#kk_edit_question_modal").modal('show'); } }); } else if (type == 'samprotik') { $.ajax({ type: "GET", url: "https://sattacademy.com/samprotik-question/edit" + '/' + id, dataType: 'json', success: function(data) { $("#edit_question_data").html(data.html); $("#kk_edit_question_modal").modal('show'); } }); } } })) }); //edit question cancel button $(document).on('click', '#kk_modal_new_service_cancel', function() { //console.log('here'); $('.indicator-label').show() $('.indicator-progress').hide() $('#kk_modal_new_service_submit').removeAttr('disabled') $("#kk_edit_question_modal").modal('hide'); $("#kk_edit_written_question_modal").modal('hide'); }) //update mcq edited question $(document).on('submit', '#kk_modal_question_update_form', function(e) { e.preventDefault() //console.log('here') $('.with-errors').text(''); $('.indicator-label').hide(); $('.indicator-progress').show(); var formData = new FormData(this); $.ajax({ type: "POST", url: "https://sattacademy.com/question/edit-question/update", data: formData, cache: false, contentType: false, processData: false, success: function(data) { if (data.success == false || data.success == "false") { var arr = Object.keys(data.errors); var arr_val = Object.values(data.errors); for (var i = 0; i < arr.length; i++) { $('.' + arr[i] + '-error').text(arr_val[i][0]) } } else if (data.error || data.error == 'true') { var alertBox = '<div class="alert alert-danger alert-dismissable">' + data .message + '</div>'; $('#kk_modal_question_update_form').find('.messages').html(alertBox).show(); } else { // empty the form $('#kk_modal_question_update_form')[0].reset(); $("#kk_edit_question_modal").modal('hide'); toastr.success(data.message); } $('.indicator-label').show() $('.indicator-progress').hide() $('#kk_modal_new_service_submit').removeAttr('disabled') } }); }) /**end::Question Edit**/ //update written edited question $(document).on('submit', '#kk_modal_written_question_update_form', function(e) { e.preventDefault() //console.log('here') $('.with-errors').text(''); $('.indicator-label').hide(); $('.indicator-progress').show(); var formData = new FormData(this); $.ajax({ type: "POST", url: "https://sattacademy.com/written-question/edited-question/store", data: formData, cache: false, contentType: false, processData: false, success: function(data) { if (data.success == false || data.success == "false") { var arr = Object.keys(data.errors); var arr_val = Object.values(data.errors); for (var i = 0; i < arr.length; i++) { $('.' + arr[i] + '-error').text(arr_val[i][0]) } } else if (data.error || data.error == 'true') { var alertBox = '<div class="alert alert-danger alert-dismissable">' + data .message + '</div>'; $('#kk_modal_written_question_update_form').find('.messages').html(alertBox) .show(); } else { // empty the form $('#kk_modal_written_question_update_form')[0].reset(); $("#kk_edit_written_question_modal").modal('hide'); toastr.success(data.message); } $('.indicator-label').show() $('.indicator-progress').hide() $('#kk_modal_new_service_submit').removeAttr('disabled') } }); }) //update samprotik edited question $(document).on('submit', '#kk_modal_samprotik_question_update_form', function(e) { e.preventDefault() //console.log('here') $('.with-errors').text(''); $('.indicator-label').hide(); $('.indicator-progress').show(); var formData = new FormData(this); $.ajax({ type: "POST", url: "https://sattacademy.com/samprotik-question/edit-question/update", data: formData, cache: false, contentType: false, processData: false, success: function(data) { if (data.success == false || data.success == "false") { var arr = Object.keys(data.errors); var arr_val = Object.values(data.errors); for (var i = 0; i < arr.length; i++) { $('.' + arr[i] + '-error').text(arr_val[i][0]) } } else if (data.error || data.error == 'true') { var alertBox = '<div class="alert alert-danger alert-dismissable">' + data .message + '</div>'; $('#kk_modal_samprotik_question_update_form').find('.messages').html(alertBox) .show(); } else { // empty the form $('#kk_modal_samprotik_question_update_form')[0].reset(); $("#kk_edit_question_modal").modal('hide'); toastr.success(data.message); } $('.indicator-label').show() $('.indicator-progress').hide() $('#kk_modal_new_service_submit').removeAttr('disabled') } }); }) /**end::Question Edit**/ /**#########begin::Description ########**/ //get description// $(document).on('click', '.getDescription', function() { var id = $(this).data('id'); var type = $(this).data('type'); //console.log(type); var thisbtn = $(this); $.ajax({ type: "GET", beforeSend: function() { thisbtn.closest('span').find('.indicator-progress').show(); }, url: "https://sattacademy.com/description/get-des" + '/' + id + '/' + type, dataType: 'json', success: function(data) { thisbtn.parents('div.card-footer').find('div.all-description').html(data.html); thisbtn.removeClass('getDescription'); $('.indicator-progress').hide(); MathJax.Hub.Typeset(); }, complete: function() { //call the function on page load tableWrap(); imageSize(); $('.indicator-progress').hide(); } }); }) //add new description $(document).on('click', '.addDescription', function() { var id = $(this).data('id'); var type = $(this).data('type'); //console.log(id); $('.with-errors').text(''); $('.messages').text(''); myEditor.setData(''); $('#kk_modal_new_question_des_form')[0].reset(); $('input[name="question_id"]').val(id); $('input[name="type"]').val(type); $('#kk_modal_new_question_des').modal('show'); }); //new description save// $('#kk_modal_new_question_des_form').on('submit', function(e) { e.preventDefault() $('.with-errors').text(''); $('.indicator-label').hide(); $('.indicator-progress').show(); var formData = new FormData(this); formData.append('description', myEditor.getData()); $.ajax({ type: "POST", url: "https://sattacademy.com/description/store", data: formData, cache: false, contentType: false, processData: false, success: function(data) { if (data.success == false || data.success == "false") { var arr = Object.keys(data.errors); var arr_val = Object.values(data.errors); for (var i = 0; i < arr.length; i++) { $('.' + arr[i] + '-error').text(arr_val[i][0]) } } else if (data.error || data.error == 'true') { var alertBox = '<div class="alert alert-danger" alert-dismissable">' + data .message + '</div>'; $('#kk_modal_new_question_des_form').find('.messages').html(alertBox).show(); } else { // empty the form myEditor.setData(''); $('#kk_modal_new_question_des_form')[0].reset(); $("#kk_modal_new_question_des").modal('hide'); toastr.success(data.message); } $('.indicator-label').show(); $('.indicator-progress').hide(); $('#kk_modal_new_service_submit').removeAttr('disabled'); } }); }) //add description cancel button// $(document).on('click', '#kk_modal_add_description_cancel', function() { $('.with-errors').text(''); $('.indicator-label').show(); $('.indicator-progress').hide(); $('#kk_modal_new_service_submit').removeAttr('disabled'); $('#kk_modal_new_question_des_form')[0].reset(); $("#kk_modal_new_question_des").modal('hide'); }) /**########begin::edit-description#########**/ $(document).on('click', '.edit-description', function() { var des_id = $(this).data('description_id'); var short_description = $(this).data('short_description'); var description = $(this).data('description'); var question_id = $(this).data('question_id'); var type = $(this).data('type'); // console.log(des_id); Swal.fire({ text: "Are you sure you want to edit this description?", icon: "warning", showCancelButton: !0, buttonsStyling: !1, confirmButtonText: "Confirm", cancelButtonText: "No, cancel", customClass: { confirmButton: "btn fw-bold btn-danger", cancelButton: "btn fw-bold btn-active-light-primary" } }).then((function(o) { if (o.value) { //if agree myEditor4.setData(description); $("textarea[name='short_description']").val(short_description); $("textarea[name='description']").val(description); $("input[name='description_id']").val(des_id); $("input[name='question_id']").val(question_id); $("input[name='type']").val(type); $("#kk_modal_edit_description").modal('show'); // $("#kk_modal_edit_description").modal({ // focus: false // }); // $.ajax({ // type:"GET", // url: "https://sattacademy.com/description/edit-des", // dataType: 'json', // data:{ // 'description_id' : des_id // }, // success:function(data){ // $("#edit_description_data").html(data.html); // $("#kk_modal_edit_description").modal('show'); // } // }); } })) }); //update description// $(document).on('submit', '#kk_modal_edit_description_form', function(e) { e.preventDefault() $('.with-errors').text(''); $('.indicator-label').hide(); $('.indicator-progress').show(); var formData = new FormData(this); //formData.append('description', myEditor.getData()); $.ajax({ type: "POST", url: "https://sattacademy.com/description/update", data: formData, cache: false, contentType: false, processData: false, success: function(data) { if (data.success == false || data.success == "false") { var arr = Object.keys(data.errors); var arr_val = Object.values(data.errors); for (var i = 0; i < arr.length; i++) { $('.' + arr[i] + '-error').text(arr_val[i][0]) } } else if (data.error || data.error == 'true') { var alertBox = '<div class="alert alert-danger" alert-dismissable">' + data .message + '</div>'; $('#kk_modal_edit_description_form').find('.messages').html(alertBox).show(); } else { // empty the form $('#kk_modal_edit_description_form')[0].reset(); $("#kk_modal_edit_description").modal('hide'); toastr.success(data.message); } $('.indicator-label').show(); $('.indicator-progress').hide(); $('#kk_modal_new_service_submit').removeAttr('disabled'); } }); }) //description edit cancel button// $(document).on('click', '#kk_modal_edit_description_cancel', function() { $('.indicator-label').show(); $('.indicator-progress').hide(); $('#kk_modal_new_service_submit').removeAttr('disabled'); $('#kk_modal_edit_description_form')[0].reset(); $("#kk_modal_edit_description").modal('hide'); }) /**######### Show Hide Description #######*/ $(document).on('click', '.show-des', function() { $(this).closest('span').find('.fa-caret-right').css({ "transform": "rotate(90deg)" }); $(this).addClass('hide-des'); $(this).parents('div.card-footer').find('div.all-description').removeClass('d-none'); }) $(document).on('click', '.hide-des', function() { $(this).closest('span').find('.fa-caret-right').css({ "transform": "rotate(360deg)" }); $(this).parents('div.card-footer').find('div.all-description').addClass('d-none'); $(this).removeClass('hide-des'); }) /**########## end::Description #######**/ /**###### begin:: Bookmark ######**/ $(document).ready(function() { var thisbtn; $(document).on('click', '.bookmark', function() { var id = $(this).data('id'); var catid = $(this).data('catid'); var type = $(this).data('type'); //console.log('type'); // console.log(catid); thisbtn = $(this); $('.with-errors').text(''); $('#kk_modal_new_bookmark_form')[0].reset(); //append category_id and question_id into bookmark form $('input[name="question_id"]').val(id); $('input[name="catid"]').val(catid); $('input[name="type"]').val(type); $('#kk_modal_new_bookmark').modal('show'); }); //new bookmark save// $('#kk_modal_new_bookmark_form').on('submit', function(e) { e.preventDefault() $('.with-errors').text(''); $('.indicator-label').hide(); $('.indicator-progress').show(); var formData = new FormData(this); $.ajax({ type: "POST", url: "https://sattacademy.com/question/bookmark", data: formData, cache: false, contentType: false, processData: false, success: function(data) { if (data.success == false || data.success == "false") { var arr = Object.keys(data.errors); var arr_val = Object.values(data.errors); for (var i = 0; i < arr.length; i++) { $('.' + arr[i] + '-error').text(arr_val[i][0]) } } else if (data.error || data.error == 'true') { var alertBox = '<div class="alert alert-danger alert-dismissable">' + data .message + '</div>'; $('#kk_modal_new_bookmark_form').find('.messages').html(alertBox) .show(); } else { // empty the form $('#kk_modal_new_bookmark_form')[0].reset(); $("#kk_modal_new_bookmark").modal('hide'); toastr.success(data.message); //footer btn change on footer btn click thisbtn.addClass('remove-bookmark'); thisbtn.data('bookmark_id', data.bookmark.id); thisbtn.removeClass('bookmark') thisbtn.children().addClass('text-primary'); //tolbar html change on footer btn click thisbtn.parents('div.card-footer').siblings('div.card-header').find( 'div.bookmark-btn').find('a').addClass('remove-bookmark'); thisbtn.parents('div.card-footer').siblings('div.card-header').find( 'div.bookmark-btn').find('a').data('bookmark_id', data .bookmark.id); thisbtn.parents('div.card-footer').siblings('div.card-header').find( 'div.bookmark-btn').find('a').removeClass('bookmark'); thisbtn.parents('div.card-footer').siblings('div.card-header').find( 'div.bookmark-btn').find('a').text('Remove Bookmark'); //toolbar btn chnage on toolbar btn click thisbtn.parent('div.bookmark-btn').find('a').text( 'Remove Bookmark'); thisbtn.parent('div.bookmark-btn').find('a').addClass( 'remove-bookmark'); thisbtn.parent('div.bookmark-btn').find('a').removeClass( 'bookmark'); //footer button change on toolbar btn click thisbtn.parents('div.card-header').siblings('div.card-footer').find( 'div.footer-bookmark').find('a').addClass('remove-bookmark'); thisbtn.parents('div.card-header').siblings('div.card-footer').find( 'div.footer-bookmark').find('a').data('bookmark_id', data .bookmark.id); thisbtn.parents('div.card-header').siblings('div.card-footer').find( 'div.footer-bookmark').find('a').children().addClass( 'text-primary'); } $('.indicator-progress').hide(); $('.indicator-label').show(); $('#bookmark_type').val(null).trigger('change'); } }); }); //cancel button// $('#kk_modal_bookmark_cancel').on('click', function() { console.log('working'); $('.messages').empty(); $('.with-errors').text(''); $('.indicator-label').show(); $('.indicator-progress').hide(); $('#kk_modal_new_bookmark_form')[0].reset(); $('#kk_modal_new_bookmark').modal('hide'); $('#bookmark_type').val(null).trigger('change'); }) }); /**####### end:: Bookmark ###########**/ /**######## begin::remove from bookmark ########**/ $(document).on('click', '.remove-bookmark', function() { var id = $(this).data('bookmark_id'); //console.log('remove'); var thisbtn = $(this); Swal.fire({ text: "Are you sure you want to remove this Question from your bookmarks?", icon: "warning", showCancelButton: !0, buttonsStyling: !1, confirmButtonText: "Yes, remove", cancelButtonText: "No, cancel", customClass: { confirmButton: "btn fw-bold btn-danger", cancelButton: "btn fw-bold btn-active-light-primary" } }).then((function(o) { if (o.value) { //if agree $.ajax({ type: "GET", url: "https://sattacademy.com/question/remove-from-bookmark", dataType: 'json', data: { 'id': id }, success: function(data) { toastr.success(data.message); //footer btn change on footer btn click thisbtn.removeClass('remove-bookmark'); thisbtn.addClass('bookmark'); thisbtn.children().removeClass('text-primary'); //tolbar html change on footer btn click thisbtn.parents('div.card-footer').siblings('div.card-header') .find('div.bookmark-btn').find('a').addClass('bookmark'); thisbtn.parents('div.card-footer').siblings('div.card-header') .find('div.bookmark-btn').find('a').removeClass( 'remove-bookmark'); thisbtn.parents('div.card-footer').siblings('div.card-header') .find('div.bookmark-btn').find('a').text('Add Bookmark'); //toolbar btn chnage on toolbar btn click thisbtn.parent('div.bookmark-btn').find('a').text( 'Add Bookmark'); thisbtn.parent('div.bookmark-btn').find('a').addClass( 'bookmark'); thisbtn.parent('div.bookmark-btn').find('a').removeClass( 'remove-bookmark'); //footer button change on toolbar btn click thisbtn.parents('div.card-header').siblings('div.card-footer') .find('div.footer-bookmark').find('a').addClass('bookmark'); thisbtn.parents('div.card-header').siblings('div.card-footer') .find('div.footer-bookmark').find('a').removeClass( 'remove-bookmark'); thisbtn.parents('div.card-header').siblings('div.card-footer') .find('div.footer-bookmark').find('a').children() .removeClass('text-primary'); let currentRouteName = 'job.single-question' if(currentRouteName == 'profile.bookmark') thisbtn.closest('div.card.card-bordered').fadeOut(); } }); } })) }) /**####### end::remove from bookmark ##########**/ /**####### begin::Video section ######**/ $(document).on('click', '.add-video', function() { $('#kk_modal_show_video').modal('hide'); var id = $(this).data('id'); // console.log(id); var type = $(this).data('type'); $('input[name="data_id"]').val(id); $('input[name="type"]').val(type); $('#kk_modal_add_video').modal('show'); }); $(document).on('click', '#kk_modal_add_video_cancel', function() { $('.messages').empty(); $('.with-errors').text(''); $('.indicator-label').show(); $('.indicator-progress').hide(); $('#kk_modal_add_video').modal('hide'); }) //add video// $(document).on('submit', '#kk_modal_new_video_form', function(e) { e.preventDefault(); $('.messages').empty(); $('.with-errors').text(''); $('.indicator-label').hide(); $('.indicator-progress').show(); var formData = new FormData(this); $.ajax({ type: "POST", url: "https://sattacademy.com/question/video/store", data: formData, cache: false, contentType: false, processData: false, success: function(data) { if (data.success == false || data.success == "false") { var arr = Object.keys(data.errors); var arr_val = Object.values(data.errors); for (var i = 0; i < arr.length; i++) { $('.' + arr[i] + '-error').text(arr_val[i][0]) } } else if (data.error || data.error == 'true') { var alertBox = '<div class="alert alert-danger" alert-dismissable">' + data .message + '</div>'; $('#kk_modal_new_video_form').find('.messages').html(alertBox).show(); } else { // empty the form $('#kk_modal_new_video_form')[0].reset(); $("#kk_modal_add_video").modal('hide'); toastr.success(data.message); } $('.indicator-label').show(); $('.indicator-progress').hide(); $('#kk_modal_new_service_submit').removeAttr('disabled'); } }); }) //show video// $(document).on('click', '.show-video', function() { var id = $(this).data('id'); // console.log(id); var type = $(this).data('type'); $.ajax({ type: "GET", url: "https://sattacademy.com/question/video/show" + '/' + id + '/' + type, dataType: 'json', beforeSend: function() { $('#kk_modal_add_video').modal('hide'); }, success: function(data) { $("#video_data").html(data.html); $("#kk_modal_show_video").modal('show'); }, complete: function() { var w = window.innerWidth; var h = window.innerHeight; // console.log(w); // console.log(h); if (w <= 390) { $('iframe').css({ 'width': '100%', 'height': 'auto' }) } else if (w > 390 && w <= 576) { $('iframe').css({ 'width': '100%', 'height': '200px' }) } else if (w > 576 && w <= 768) { $('iframe').css({ 'width': '100%', 'height': '250px' }) } else { $('iframe').css({ 'width': '100%', 'height': '315px' }) } } }); }); $(document).on('click', '#kk_modal_show_video_cancel', function() { $('#kk_modal_show_video').modal('hide'); }) /**###### end::Video section ########**/ /**####### begin::add tag ###########**/ //add new// $(document).on('click', '.tag', function() { var id = $(this).data('id'); var subject_id = $(this).data('subject_id'); var type = $(this).data('type'); // console.log(id); // console.log(subject_id); //clear $('input[name="question_id"]').val(''); $('input[name="subject_id"]').val(''); $('input[name="type"]').val(''); $('input[name="tag"]').val(''); $('div.result').html(''); $('div.tag-div_2').html(''); //append subject_id and question_id into tag modal// $('input[name="question_id"]').val(id); $('input[name="subject_id"]').val(subject_id); $('input[name="type"]').val(type); $('#kk_modal_add_tag').modal('show'); }); //search tag// $(document).ready(function() { var timeout = null; $(document).on('keyup', '.search_tag', function() { var question_id = $('input[name="question_id"]').val(); var subject_id = $('input[name="subject_id"]').val(); var type = $('input[name="type"]').val(); var this_input = $(this); //console.log(id) clearTimeout(timeout); timeout = setTimeout(() => { var val = $(this).val(); if (val == "") { $('.result').html(''); } //If val is not empty. else { //AJAX is called. $.ajax({ type: "POST", url: "https://sattacademy.com/question/tag/search", headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { //Assigning value of "val" into "search" variable. search: val, question_id: question_id, subject_id: subject_id, type: type }, //If result found, this funtion will be called. success: function(data) { //console.log(data) this_input.closest('div').find('.result').html(data); //this_input.closest('#result').hide() //$('#result').html(data); } }); } }, 700); }); }) $(document).on('click', '#kk_modal_tag_close', function() { //clear $('input[name="question_id"]').val(''); $('input[name="subject_id"]').val(''); $('input[name="tag"]').val(''); $('input[name="type"]').val(''); $('div.result').html(''); $('div.tag-div_2').html(''); $('#kk_modal_add_tag').modal('hide'); }) //add tag $(document).on('click', '.add-tag', function() { var sid = $(this).data('sid'); var qid = $(this).data('qid'); var type = $(this).data('type'); var thisElement = $(this); //AJAX is called. $.ajax({ type: "POST", url: "https://sattacademy.com/question/tag/tag-added", headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { //Assigning value of "val" into "search" variable. subject_id: sid, question_id: qid, type: type }, //If result found, this funtion will be called. success: function(data) { if (data.success) { toastr.success(data.message); // $('#kk_modal_add_tag').modal('hide'); // $('.result').html(''); // $('.search_tag').val(''); thisElement.removeClass('add-tag'); thisElement.addClass('remove-tag'); let html = `<span class="badge badge-info cursor-pointer fs-8 mb-3 me-2 remove-tag" data-sid="${data.subject.id}" data-qid="${data.question_id}" data-type="${data.type}" title="Remove">${data.subject.name}</span>`; thisElement.parents('div.modal-body').find('div.tag-div_2').append(html); } else { toastr.error(data.message); } } }); }) //remove tag// $(document).on('click', '.remove-tag', function() { var sid = $(this).data('sid'); var qid = $(this).data('qid'); var type = $(this).data('type'); //console.log(sid); //console.log(type); var thisBtn = $(this); console.log(thisBtn); //AJAX is called. $.ajax({ type: "POST", url: "https://sattacademy.com/admin/question/remove-tag", headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { //Assigning value of "val" into "search" variable. subject_id: sid, question_id: qid, type: type }, //If result found, this funtion will be called. success: function(data) { if (data.success) { toastr.success(data.message); thisBtn.removeClass('remove-tag'); thisBtn.addClass('add-tag'); thisBtn.parents('div.modal-body').find('.tag-div_2 span[data-sid="' + sid + '"]').remove(); //location.reload(); } else { toastr.error(data.message) } } }); }) /**####### end::Tag #########**/ /*##### begin::Error Report #####*/ function cleanForm() { $('.messages').empty(); $('.with-errors').text(''); $('.indicator-label').show(); $('.indicator-progress').hide(); $('#kk_modal_error_report_form')[0].reset(); } $(document).on('click', '.error-report', function() { const id = $(this).data('id'); const type = $(this).data('type'); cleanForm(); $('input[name="id"]').val(id); $('input[name="type"]').val(type); $('#kk_modal_error_report').modal('show'); }) $(document).on('click', '#kk_modal_error_report_cancel', function() { cleanForm(); $('#kk_modal_error_report').modal('hide'); }) //submit $(document).on('submit', '#kk_modal_error_report_form', function(e) { e.preventDefault(); $('.messages').empty(); $('.with-errors').text(''); $('.indicator-label').hide(); $('.indicator-progress').show(); var formData = new FormData(this); $.ajax({ type: "POST", url: "https://sattacademy.com/error-report/store", data: formData, cache: false, contentType: false, processData: false, success: function(data) { if (data.success == false || data.success == "false") { var arr = Object.keys(data.errors); var arr_val = Object.values(data.errors); for (var i = 0; i < arr.length; i++) { $('.' + arr[i] + '-error').text(arr_val[i][0]) } } else if (data.error || data.error == 'true') { var alertBox = '<div class="alert alert-danger" alert-dismissable">' + data .message + '</div>'; $('#kk_modal_error_report_form').find('.messages').html(alertBox).show(); } else { // empty the form $('#kk_modal_error_report_form')[0].reset(); $("#kk_modal_error_report").modal('hide'); toastr.success(data.message); } $('.indicator-label').show(); $('.indicator-progress').hide(); } }); }) /*##### end::Error Report #####*/ /* begin::voteing script */ $(document).on('click', '.choosen-option', function() { if ($(this).is(':checked')) { var choosen = $(this).val(); } else { var choosen = 0; } let ques_id = $(this).data('ques_id'); //console.log(choosen); //set & get local storage data let previous = localStorage.getItem('key'); localStorage.setItem('key', choosen); //console.log(previous); const thisElement = $(this); incrementDecrement(thisElement, choosen, previous); //AJAX is called. $.ajax({ type: "POST", url: "https://sattacademy.com/mcq-question/answer-vote", headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { ques_id: ques_id, choosen: choosen, }, //If result found, this funtion will be called. success: function(data) { if (data.success) { console.log(data.message); } else { toastr.error(data.message); } } }); }) /* end::voteing script */ function onlyOne(checkbox) { let name = $(checkbox).attr('name'); var checkboxes = document.getElementsByName(name) checkboxes.forEach((item) => { if (item !== checkbox) item.checked = false }) } function incrementDecrement(thisElement, choosen, previous) { var option1 = thisElement.parents('div.parent-card-body').find('span.vote_option_1'); var option2 = thisElement.parents('div.parent-card-body').find('span.vote_option_2'); var option3 = thisElement.parents('div.parent-card-body').find('span.vote_option_3'); var option4 = thisElement.parents('div.parent-card-body').find('span.vote_option_4'); var option5 = thisElement.parents('div.parent-card-body').find('span.vote_option_5'); if (choosen == 1) { let val = parseInt(option1.text()); option1.text(val + 1); } else if (choosen == 2) { let val = parseInt(option2.text()); option2.text(val + 1); } else if (choosen == 3) { let val = parseInt(option3.text()); option3.text(val + 1); } else if (choosen == 4) { let val = parseInt(option4.text()); option4.text(val + 1); } else if (choosen == 5) { let val = parseInt(option5.text()); option5.text(val + 1); } if (previous == 1) { let val = parseInt(option1.text()); if (val > 0) { option1.text(val - 1); } } else if (previous == 2) { let val = parseInt(option2.text()); if (val > 0) { option2.text(val - 1); } } else if (previous == 3) { let val = parseInt(option3.text()); if (val > 0) { option3.text(val - 1); } } else if (previous == 4) { let val = parseInt(option4.text()); if (val > 0) { option4.text(val - 1); } } else if (previous == 5) { let val = parseInt(option5.text()); if (val > 0) { option5.text(val - 1); } } } </script> <script type="text/javascript"> /**######begin::test mode & reading mode hide show #######**/ $(document).ready(function(){ $('.test-mode-data').addClass('d-none'); $('input[name="active_mode"]').val('reading'); $('.test-mode').on('click', function(){ $('.test-mode-data').removeClass('d-none'); $('.reading-mode-data').addClass('d-none'); $('.edit-btn-div').addClass('d-none'); $(this).addClass('d-none'); $('.mark-count').removeClass('d-none'); $('.reading-mode').removeClass('d-none'); $('input[name="active_mode"]').val('test'); $('.toolbar-div').addClass('d-none'); $('.tag-div').addClass('d-none'); $('.activity').addClass('d-none'); $('.custom-bookmark-card').addClass('d-none'); }) $('.reading-mode').on('click', function(){ $('.reading-mode-data').removeClass('d-none'); $('.test-mode-data').addClass('d-none'); $('.edit-btn-div').removeClass('d-none'); $(this).addClass('d-none'); $('.mark-count').addClass('d-none'); $('.test-mode').removeClass('d-none'); $('input[name="active_mode"]').val('reading'); $('.toolbar-div').removeClass('d-none'); $('.tag-div').removeClass('d-none'); $('.activity').removeClass('d-none'); $('.custom-bookmark-card').removeClass('d-none'); }) }) /**######end::test mode & reading mode hide show #######**/ /**######begin::Test #######**/ $(document).ready(function(){ $(document).on('click', '.click-option', function(){ var id = $(this).data('id') var option_value = $(this).data('option_value'); var answer = $(this).parents('div.parent-row').find('input[name="answer"]').val(); // console.log('question='+id); // console.log('option='+option_value); // console.log('answer='+answer); $(this).parents('div.parent-row').find('span').click(function() { return false; }); $(this).parents('div.parent-row').find('div.click-option').removeClass('cursor-pointer'); if(answer == 1){ $(this).parents('div.parent-row').find('i.option-1').removeClass('fa-dot-circle text-dark'); $(this).parents('div.parent-row').find('i.option-1').addClass('fa-check-circle fs-4 sa-success'); $(this).parents('div.parent-row').find('div.option-1-text').removeClass('text-dark'); $(this).parents('div.parent-row').find('div.option-1-text').addClass('sa-success fs-4 fw-bold'); }else if(answer == 2){ $(this).parents('div.parent-row').find('i.option-2').removeClass('fa-dot-circle text-dark'); $(this).parents('div.parent-row').find('i.option-2').addClass('fa-check-circle fs-4 sa-success'); $(this).parents('div.parent-row').find('div.option-2-text').removeClass('text-dark'); $(this).parents('div.parent-row').find('div.option-2-text').addClass('sa-success fs-2 fw-bold'); }else if(answer == 3){ $(this).parents('div.parent-row').find('i.option-3').removeClass('fa-dot-circle text-dark'); $(this).parents('div.parent-row').find('i.option-3').addClass('fa-check-circle fs-4 sa-success'); $(this).parents('div.parent-row').find('div.option-3-text').removeClass('text-dark'); $(this).parents('div.parent-row').find('div.option-3-text').addClass('sa-success fs-2 fw-bold'); }else if(answer == 4){ $(this).parents('div.parent-row').find('i.option-4').removeClass('fa-dot-circle text-dark'); $(this).parents('div.parent-row').find('i.option-4').addClass('fa-check-circle fs-4 sa-success'); $(this).parents('div.parent-row').find('div.option-4-text').removeClass('text-dark'); $(this).parents('div.parent-row').find('div.option-4-text').addClass('sa-success fs-2 fw-bold'); }else if(answer == 5){ $(this).parents('div.parent-row').find('i.option-5').removeClass('fa-dot-circle text-dark'); $(this).parents('div.parent-row').find('i.option-5').addClass('fa-check-circle fs-4 sa-success'); $(this).parents('div.parent-row').find('div.option-5-text').removeClass('text-dark'); $(this).parents('div.parent-row').find('div.option-5-text').addClass('sa-success fs-2 fw-bold'); } if(answer == option_value){ var val = $('#wright').html(); $('#wright').html(parseInt(val)+1); $(this).find('span.d-flex').append('<span class="ms-2"><i class="fas fa-check sa-success fs-3"></i></span>'); }else{ var val = $('#wrong').html(); //console.log(val) $('#wrong').html(parseInt(val)+1); $(this).find('span.d-flex').append('<span class="ms-2"><i class="fas fa-times sa-danger fs-3"></i></span>'); } }) }) /**######end::Test #######**/ /**begin::Question Edit**/ // //edit Question // $(document).on('click', '.editQuestion', function() { // var id = $(this).data('id'); // //console.log(id); // Swal.fire({ // text: "Are you sure you want to edit this Question?", // icon: "warning", // showCancelButton: !0, // buttonsStyling: !1, // confirmButtonText: "Confirm", // cancelButtonText: "No, cancel", // customClass: { // confirmButton: "btn fw-bold btn-danger", // cancelButton: "btn fw-bold btn-active-light-primary" // } // }).then((function (o) { // if(o.value){ //if agree // $.ajax({ // type:"GET", // url: "https://sattacademy.com/question/edit-question"+'/'+id, // dataType: 'json', // success:function(data){ // $("#edit_question_data").html(data.html); // $("#kk_edit_question_modal").modal('show'); // } // }); // } // })) // }); // //edit question cancel button // $(document).on('click', '#kk_modal_new_service_cancel', function(){ // $('.indicator-label').show() // $('.indicator-progress').hide() // $('#kk_modal_new_service_submit').removeAttr('disabled') // $("#kk_edit_question_modal").modal('hide'); // }) // //update edited question // $(document).on('submit', '#kk_modal_question_update_form', function(e){ // e.preventDefault() // //console.log('here') // $('.with-errors').text(''); // $('.indicator-label').hide(); // $('.indicator-progress').show(); // var formData = new FormData(this); // $.ajax({ // type:"POST", // url: "https://sattacademy.com/question/edit-question/update", // data:formData, // cache:false, // contentType: false, // processData: false, // success:function(data){ // if(data.success == false || data.success == "false"){ // var arr = Object.keys(data.errors); // var arr_val = Object.values(data.errors); // for(var i= 0;i < arr.length;i++){ // $('.'+arr[i]+'-error').text(arr_val[i][0]) // } // }else if(data.error || data.error == 'true'){ // var alertBox = '<div class="alert alert-danger" alert-dismissable">' + data.message + '</div>'; // $('#kk_modal_question_update_form').find('.messages').html(alertBox).show(); // }else{ // // empty the form // $('#kk_modal_question_update_form')[0].reset(); // $("#kk_edit_question_modal").modal('hide'); // toastr.success(data.message); // } // $('.indicator-label').show() // $('.indicator-progress').hide() // $('#kk_modal_new_service_submit').removeAttr('disabled') // } // }); // }) // /**end::Question Edit**/ /**########begin::edit-passage #########**/ $(document).on('click', '.edit-passage', function(){ var passage_id = $(this).data('passage_id'); //console.log(des_id); Swal.fire({ text: "Are you sure you want to edit this passage?", icon: "warning", showCancelButton: !0, buttonsStyling: !1, confirmButtonText: "Confirm", cancelButtonText: "No, cancel", customClass: { confirmButton: "btn fw-bold btn-danger", cancelButton: "btn fw-bold btn-active-light-primary" } }).then((function (o) { if(o.value){ //if agree $.ajax({ type:"GET", url: "https://sattacademy.com/question/passage/edit", dataType: 'json', data:{ 'passage_id' : passage_id }, success:function(data){ $("#edit_passage").html(data.html); $("#kk_modal_edit_passage").modal('show'); } }); } })) }); //update passage $(document).on('submit', '#kk_modal_edit_passage_form',function(e){ e.preventDefault() $('.with-errors').text(''); $('.indicator-label').hide(); $('.indicator-progress').show(); var formData = new FormData(this); // formData.append('passage', myPassaseEditor.getData()); $.ajax({ type:"POST", url: "https://sattacademy.com/question/passage/update", data:formData, cache:false, contentType: false, processData: false, success:function(data){ if(data.success == false || data.success == "false"){ var arr = Object.keys(data.errors); var arr_val = Object.values(data.errors); for(var i= 0;i < arr.length;i++){ $('.'+arr[i]+'-error').text(arr_val[i][0]) } }else if(data.error || data.error == 'true'){ var alertBox = '<div class="alert alert-danger" alert-dismissable">' + data.message + '</div>'; $('#kk_modal_edit_passage_form').find('.messages').html(alertBox).show(); }else{ // empty the form $('#kk_modal_edit_passage_form')[0].reset(); $("#kk_modal_edit_passage").modal('hide'); toastr.success(data.message); } $('.indicator-label').show(); $('.indicator-progress').hide(); $('#kk_modal_new_service_submit').removeAttr('disabled'); } }); }) //passage edit cancel button $(document).on('click', '#kk_modal_edit_passage_cancel', function(){ $('.indicator-label').show(); $('.indicator-progress').hide(); $('#kk_modal_new_service_submit').removeAttr('disabled'); $('#kk_modal_edit_passage_form')[0].reset(); $("#kk_modal_edit_passage").modal('hide'); }) /**#########end::edit-passage ##########**/ </script> <script type="text/javascript"> const url = window.location.href; //console.log(url); const shareData = { title: 'SATT ACADEMY', // text: 'Learn web development on MDN!', url: url } $(document).on('click', '.share', async() => { //console.log('click'); try { await navigator.share(shareData); //toastr.success('Shared successfully'); } catch (err) { console.error(err); } }); </script> <script type="text/javascript"> $(document).on('click', '.kt_user_follow_button', function() { //console.log('Follow btn click'); var id = $(this).data('id'); var thisBtn = $(this); $.ajax({ type: "GET", url: "https://sattacademy.com/user-follow" + "/" + id, data: {}, beforeSend: function() { thisBtn.find('.indicator-label').hide(); thisBtn.find('.indicator-progress').show(); }, success: function(data) { let follower_count_html = thisBtn.parent('div.d-flex').find('.follower_count') .html(); let blog_following_count_html = thisBtn.parent().parent().find( '.blog_follower_count').html(); if (data.success) { if (data.value == 'follow') { $('.indicator-label').show(); $('.indicator-progress').hide(); thisBtn.removeClass('btn-primary').addClass('btn-success'); thisBtn.find('.indicator-label').text(' Following'); if ($('.follower_count').length > 0) { if (!follower_count_html.includes('k')) { let followers = parseInt(follower_count_html); thisBtn.parent('div.d-flex').find('.follower_count').html( `${followers + 1}`); } } // blog details if ($('.blog_follower_count').length > 0) { if (!blog_following_count_html.includes('k')) { let followersBlog = parseInt(blog_following_count_html); thisBtn.parent().parent().find('.blog_follower_count').html( `${followersBlog + 1}`); } } } else { $('.indicator-label').show(); $('.indicator-progress').hide(); thisBtn.removeClass('btn-success').addClass('btn-primary'); thisBtn.find('.indicator-label').text(' Follow'); if ($('.follower_count').length > 0) { if (!follower_count_html.includes('k')) { let followers = parseInt(follower_count_html); thisBtn.parent('div.d-flex').find('.follower_count').html( `${followers - 1}`); } } // blog details if ($('.blog_follower_count').length > 0) { if (!blog_following_count_html.includes('k')) { let followersBlog = parseInt(blog_following_count_html); thisBtn.parent().parent().find('.blog_follower_count').html( `${followersBlog - 1}`); } } } } else { toastr.error(data.message); $('.indicator-label').show(); $('.indicator-progress').hide(); } }, error: function(data) { toastr.error('Please login to follow'); $('.indicator-label').show(); $('.indicator-progress').hide(); } }); }); </script> <script type="text/javascript"> //user short statistics $(document).on('mouseover', '.user-statistics', function(){ let id = $(this).data('id'); let flug = $(this).data('flug'); //console.log(flug); const thisElement = $(this); if(flug == '-1'){ $.ajax({ type:"GET", url: "https://sattacademy.com/user-short-statistics"+'/'+id, data:{}, dataType: 'json', success:function(data){ if(data.success == true || data.success == 'true'){ thisElement.prepend(data.html); thisElement.data('flug', '1'); }else{ toastr.error(data.message); } } }); } }); // //close $(document).on('mouseleave', '.user-statistics', function(){ //console.log('leave'); let flug = $(this).data('flug', '-1'); $('div.statistics-data').hide(); }) </script> <script type="text/javascript"> $(document).ready(function() { /*toggle btn*/ $('#toggle-subject-content').on('click', function() { $("#toggle-div").slideToggle(500); $(this).find('i.fas').toggleClass('fa-chevron-down fa-chevron-up'); }) //Read More & Less $(document).on('click', '.myBtn', function() { //console.log('click more'); $(this).parents('.parent-div').find('span.more').removeClass('d-none'); $(this).parents('.parent-div').find('span.dots').addClass('d-none'); $(this).text('Read less'); $(this).addClass('less'); }) $(document).on('click', '.less', function() { //console.log('click less'); $(this).parents('.parent-div').find('span.more').addClass('d-none'); $(this).parents('.parent-div').find('.dots').removeClass('d-none'); $(this).text('Read more'); $(this).removeClass('less'); }) }) $(document).ready(function() { tableWrap(); imageSize(); removeMargin(); }); function removeMargin() { $('.question-span').find('p').css({ 'margin': '0px' }); } //table wrap function function tableWrap() { $("table").wrap(`<div class="table-responsive w-100"></div>`); $("table").addClass("table table-striped table-bordered"); $("table").find('thead').addClass('thead-dark fw-bolder fs-4'); $("table").css({ 'max-width': '100%', 'margin-top': '10px', 'margin-bottom': '10px' }); $("table").find('thead').css({ 'background-color': 'gray', 'color': 'white' }); }; //image sizeing function function imageSize() { $(".question-card-div img").not('.toolbar-img').wrap(`<div class="w-100"></div>`); $(".question-card-div img").css({ 'max-width': '95%', 'margin': 'auto' }); } window.addEventListener('completionToggled', function(e) { let isCompleted = e.detail[0]; toastr.success(isCompleted ? 'Marked as Read!' : 'Marked as Unread!'); }); </script> <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script> <script> $(document).ready(function() { var dropdownLoaded = false; function loadDropdown() { if (dropdownLoaded) return; $.ajax({ url: "https://sattacademy.com/profile/dropdown", method: 'GET', beforeSend: function() { $('#header-dropdown-profile').html( '<div class="skeleton-c9ay7k6i5vw my-3"></div>' ); }, success: function(data) { dropdownLoaded = true; $('#header-dropdown-profile').html(data); }, error: function(xhr) { console.error(xhr.responseText); } }); } // Preload on hover $('#header-dropdown').on('mouseenter', loadDropdown); // Fallback: load on click if hover didn’t trigger $('#header-dropdown').on('click', loadDropdown); }); </script> <script type="text/javascript"> //Newsletter Subscriber $(document).on('click', '#kk_newsletter_subscriber', function(e) { e.preventDefault() //console.log('here') $('.with-errors').text('') var thisaddbtn = $(this); var email = $('input[name=email]').val(); // console.log(email); $.ajax({ type: "POST", url: "https://sattacademy.com/newsletter-subscriber/store", data: { "_token": "eCB19NbixLlgKCphwHwDaE2TL8M7bdLJd4vfiXv8", email: email, }, dataType: "json", success: function(data) { if (data.success == false || data.success == "false") { var arr = Object.keys(data.errors); var arr_val = Object.values(data.errors); for (var i = 0; i < arr.length; i++) { $('.' + arr[i] + '-error').text(arr_val[i][0]) } } else if (data.error || data.error == 'true') { var alertBox = '<div class="alert alert-danger" alert-dismissable">' + data .message + '</div>'; $('#kk_modal_new_question_form').find('.messages').html(alertBox).show(); } else { toastr.success(data.message); $("#subscriber_email").val(''); } } }); }) </script>  <script type="text/javascript"> function card(content, options = { withLink: true, countClick: true }) { let card = ''; card += `<div class="card-rounded promotion-card" onclick="handlePromotionCardClick('${content.target_url}', ${options?.withLink}, ${content.id}, ${options?.countClick})">`; if (content.content_header) { if(content.content_header.startsWith('<')) { card += `<div> ${content.content_header} </div>`; } else { card += `<div class="text-dark text-center p-3" style="border-bottom: 1px solid #999;"> ${content.content_header} </div>`; } } if (content.type == 'custom') { card += `<div class=""> ${content.content} </div>`; } else if (content.type == 'image') { let imgUrl = content.image.startsWith('http') ? content.image : '/storage/' + content.image; card += `<img src="${imgUrl}" style="max-width: 100%; height: auto;" />`; } else if (content.type == 'video') { if (content.video.includes('youtube.com/') || content.video.includes('youtu.be/') || content.video.includes('vimeo.com/') || content.video .includes('facebook.com/')) { card += `<iframe src="${convertToEmbedUrl(content.video)}" style="width: 100%; aspect-ratio: 16/9;" scrolling="no" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`; } else { card += `<video src="${content.video}" class="rounded my-auto promoted-video" style="width: 100%;" controls autoplay loop muted playsinline />`; } } else if (content.type == 'book') { let bookPrice = content.book.price; let bookDiscountPrice = content.book.discount_price; let isFree = bookDiscountPrice == 0 || bookDiscountPrice == '0'; card += ` <div class="row g-0 h-100"> <div class="col-4"> <img src="${content.book.cover_image}" class="img-fluid rounded-start" style="height: 100%; object-fit: cover; max-height: 200px;" alt="..."> </div> <div class="col-8"> <div class=""> <span class="fs-9 text-muted">BOOK</span> <h5 class="card-title"> ${content.book.name} </h5> <div class="my-1"> ${content.book.author_name ? '<span class="fs-7 text-gray-700">Author: ' + content.book.author_name + '</span>' : ''} <div class="fs-7 text-gray-700"> by ${content.book.business?.name || 'Satt Academy'}</div> </div> <div class="d-flex mt-1 align-items-center justify-content-between"> <span class=""> ${!isFree && bookPrice != bookDiscountPrice ? '<span class="text-muted text-decoration-line-through fs-6">৳' + bookPrice + '</span>' : ''} ${isFree ? '<span class="badge badge-success">Free</span>' : ('<span class="fw-bold text-danger fs-6">৳' + bookDiscountPrice + '</span>')} </span> <span> <i class="fs-5 fas fa-${content.book.book_type == 'soft_copy' ? 'file-pdf text-danger' : 'book text-info'}"></i> </span> </div> </div> </div> </div> `; } else if (content.type == 'course') { //console.log(content); card += ` <div class="row g-0 h-100"> <div class="col-4"> <img src="${content.course.cover_photo}" class="img-fluid rounded-start" style="height: 100%; object-fit: cover;" alt="..."> </div> <div class="col-8"> <div class=""> <span class="fs-9 text-muted">COURSE</span> <h5 class="card-title"> ${content.course.name} </h5> <div class="my-1"> ${content.course.author_name ? '<span class="fs-7 text-gray-700">' + content.course.author_name + '</span>' : ''} <span class="fs-7 text-gray-700"> by ${content.course.business?.name || 'Satt Academy'}</span><br> </div> <div class="d-flex align-items-center justify-content-between"> <span class=""> ${content.course.price == 0 || content.course.price == '0' || content.course.price == null ? '<span class="badge badge-success">Free</span>' : '<span class="fw-bold text-danger fs-6">৳' + content.course.price + '</span>'} </span> <span class="rounded text-white p-1 fs-9" style="background-color: #D82D2F">${content.course.course_level.toUpperCase()}</span> </div> </div> </div> </div> `; } else if (content.type == 'exam') { card += ` <div class="row g-0 h-100"> <div class="col-12"> <div class=""> <span class="fs-8 pb-3">MODEL TEST || SATT ACADEMY</span> <h5 class="text-primary text-capitalize fs-3 fw-bold mb-1"> ${content.exam.name} </h5> <p class="m-0">by ${ content.exam.business?.name ?? 'Satt Academy' }</p> <div class="d-flex mt-2 gap-2 justify-content-between align-items-end"> <div class="d-flex flex-wrap align-items-center gap-2"> <span class="badge badge-secondary">${content.exam.duration} min</span> <span class="badge badge-secondary">${content.exam.number_of_question} questions</span> <span class="badge badge-secondary">${content.exam.total_mark} marks</span> </div> <div class="btn btn-primary sa-btn-primary py-2 px-3 fs-7">Attend now!</div> </div> </div> </div> </div> `; } else if (content.type == 'exam_package') { // console.log(content); card += ` <div class="row g-0 h-100"> <div class="col-12"> <div class=""> <span class="fs-8 pb-3">EXAM PACKAGE</span> <h5 class="text-primary text-capitalize fs-3 fw-bold mb-1"> ${content.exam_package.name} </h5> <p class="m-0">by ${ content.exam_package.business?.name ?? 'Satt Academy' }</p> <div class="d-flex mt-2 gap-2 justify-content-between align-items-end"> <div class="d-flex align-items-center gap-2"> <span class="badge badge-secondary">${content.exam_package.exams_count} exams</span> </div> </div> </div> </div> </div> `; } else if (content.type == 'business') { card += ` <div class="row g-0 h-100"> <div class="col-12"> <div class=""> <div class="row"> <div class="col-2"> <img src="${content.business?.logo}" width="100" height="100" class="img-fluid rounded"> </div> <div class="col-10"> <span class="fs-8 pb-3 text-muted">BUSINESS</span> <h5 class="text-primary text-capitalize fs-3 fw-bold mb-1"> ${content.business?.name} </h5> <p class="m-0">by ${ content.business?.user?.name ?? 'Satt Academy' }</p> <div class="d-flex mt-2 gap-2 justify-content-between align-items-end"> <div class="d-flex align-items-center gap-2"> <span class="badge badge-secondary">${content.business?.books_count} books</span> <span class="badge badge-secondary">${content.business?.courses_count} courses</span> <span class="badge badge-secondary">${content.business?.exams_count} exams</span> </div> </div> </div> </div> </div> </div> </div> `; } if (content.content_footer) { if(content.content_footer.startsWith('<')) { card += `<div> ${content.content_footer} </div>`; } else { card += `<div class="text-center text-dark p-3" style="border-top: 1px solid #999;"> ${content.content_footer} </div>`; } } card += `</div>`; return card; } function handlePromotionCardClick(url, withLink, id, countClick) { // Check if the URL is valid and not empty if(url && url != '' && url != '#' && url != 'null' && withLink) { let urlToGo = `/promotion-link?id=${id}&countClick=${countClick}&_token=eCB19NbixLlgKCphwHwDaE2TL8M7bdLJd4vfiXv8`; console.log(urlToGo); window.open(urlToGo, '_blank'); } else { // Do nothing or show a message // console.log('No URL provided or link is disabled.'); } } function convertToEmbedUrl(videoUrl) { // YouTube URL patterns const youtubePattern1 = /youtube\.com\/watch\?v=([^&]+)/; const youtubePattern2 = /youtu\.be\/([^?]+)/; // Vimeo URL pattern const vimeoPattern = /vimeo\.com\/(\d+)/; // Facebook URL pattern const facebookPattern = /facebook\.com\/.+\/videos\/(\d+)/; // Check for YouTube URL (full or shortened) let match = videoUrl.match(youtubePattern1) || videoUrl.match(youtubePattern2); if (match) { const videoId = match[1]; return `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`; } // Check for Vimeo URL match = videoUrl.match(vimeoPattern); if (match) { const videoId = match[1]; return `https://player.vimeo.com/video/${videoId}`; } // Check for Facebook URL match = videoUrl.match(facebookPattern); if (match) { const videoId = match[1]; return `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(videoUrl)}`; } // Return the original URL if it's not a valid YouTube or Vimeo URL return videoUrl; } </script> <script type="text/javascript"> let offcanvasEl = document.getElementById('satt_dynamic_offcanvas'); let offcanvas = offcanvasEl && new bootstrap.Offcanvas(offcanvasEl); $(document).ready(function() { setTimeout(() => { loadPromotionData(); setTimeout(() => { initVideoObserver(); if (isMobile()) { $('#header-promotion-content, #footer-promotion-content').slick({ arrows: false, autoplay: true, //adaptiveHeight: true, }); } }, 500); // Remove promotion content when modal or offcanvas is closed $('.promotion-close-btn').on('click', function() { $('.promotion-body').html(''); }); $('#satt_dynamic_modal').on('hidden.bs.modal', function() { $('.promotion-body').html(''); }); $('#satt_dynamic_offcanvas').on('hidden.bs.offcanvas', function() { $('.promotion-body').html(''); }); }, 1000); }); // Insert inner promotion content divs let $contentListItems = $('.content-list-item'); let insertAfterEach = 3; if ($contentListItems.length >= insertAfterEach) { $contentListItems.each((index, el) => { // Insert a div after each 3 items if ((index + 1) % insertAfterEach === 0) { $(el).after('<div class="inner-promotion-content"></div>'); } }) } function isMobile() { return window.matchMedia("only screen and (max-width: 767px)").matches; } function loadPromotionData() { let route = "job.single-question"; let promotionModalShownRoutes = JSON.parse(sessionStorage.getItem('promotionModalShownRoutes')); promotionModalShownRoutes = (promotionModalShownRoutes !== null && typeof promotionModalShownRoutes === 'object' && !Array.isArray(promotionModalShownRoutes)) ? promotionModalShownRoutes : {}; let modalShown = promotionModalShownRoutes.hasOwnProperty(route); let promotionsShownInModal = promotionModalShownRoutes[route] || []; $.ajax({ type: "GET", url: "https://sattacademy.com/dynamic-promotion-content" + "?_token=" + $('meta[name="csrf-token"]').attr( 'content') + "&route=" + route + "&sidebar=" + $( '#sidebar-promotion-content').length + "&inner=" + $('.inner-promotion-content').length + "&modalShown=" + modalShown + "&promotionsShownInModal=" + JSON.stringify(promotionsShownInModal), dataType: 'json', success: function(data) { if (data) { const headerContents = data.headerContents; const footerContents = data.footerContents; const innerContents = data.innerContents; const sidebarContents = data.sidebarContents; const modalContents = data.modalContents; const offcanvasContents = data.offcanvasContents; const modalSettings = data.modalSettings; let headerCards = ''; let footerCards = ''; let innerCards = ''; let sidebarCards = ''; let modalCards = ''; let offcanvasCards = ''; if (headerContents && headerContents.length > 0) { headerContents.forEach((content) => { headerCards += card(content); }); } if (footerContents && footerContents.length > 0) { footerContents.forEach((content) => { footerCards += card(content); }); } if (innerContents && innerContents.length > 0) { let $innerPromotionContentEls = $('.inner-promotion-content'); innerContents.forEach((content, index) => { // innerCards += card(content); $innerPromotionContentEls.eq(index).html(card(content)); }); } if (sidebarContents && sidebarContents.length > 0) { sidebarContents.forEach((content) => { sidebarCards += card(content); }); } if (modalContents && modalContents.length > 0) { if (modalSettings.show_modal_header_and_footer && modalSettings .modal_header) { modalCards += `<div class='text-center'>${modalSettings.modal_header}</div>`; } if (!promotionModalShownRoutes[route]) { promotionModalShownRoutes[route] = []; } modalContents.forEach((content) => { modalCards += card(content); if (!promotionModalShownRoutes[route].includes(content.id)) { promotionModalShownRoutes[route].push(content.id); } }); if (modalSettings.show_modal_header_and_footer && modalSettings .modal_footer) { modalCards += `<div class='text-center'>${modalSettings.modal_footer}</div>`; } $('#satt_dynamic_modal .dynamic-modal-body').html(modalCards); $('#satt_dynamic_modal').modal('show'); // Save current route to session storage array sessionStorage.setItem('promotionModalShownRoutes', JSON.stringify(promotionModalShownRoutes)); } if (offcanvasContents && offcanvasContents.length > 0) { let positions = ['left', 'right']; let offcanvasPosition = positions[Math.floor(Math.random() * positions.length)]; offcanvasContents.forEach((content) => { offcanvasCards += card(content); }); if (offcanvasPosition == 'left') { offcanvasEl?.classList.add('offcanvas-start'); } else if (offcanvasPosition == 'top') { offcanvasEl?.classList.add('offcanvas-top'); } else if (offcanvasPosition == 'bottom') { offcanvasEl?.classList.add('offcanvas-bottom'); } else { offcanvasEl?.classList.add('offcanvas-end'); } $('#satt_dynamic_offcanvas .offcanvas-body')?.html(offcanvasCards); offcanvas?.show(); } $('#header-promotion-content').html(headerCards); $('#footer-promotion-content').html(footerCards); $('#sidebar-promotion-content').html(sidebarCards); // $('#inner-promotion-content').html(innerCards); } } }); } function initVideoObserver() { const videos = document.querySelectorAll('video.promoted-video'); const observerOptions = { root: null, rootMargin: '0px', threshold: 0.5 }; const observerCallback = (entries, observer) => { entries.forEach(entry => { const video = entry.target; if (entry.isIntersecting) { video.play(); } else { video.pause(); } }); }; const observer = new IntersectionObserver(observerCallback, observerOptions); videos.forEach(video => { observer.observe(video); }); } </script>  <style> .chat-icon { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background-color: #007bff; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); cursor: pointer; z-index: 99; transition: all 0.3s ease; } .chat-icon:hover { transform: scale(1.05); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); } .chat-icon svg { width: 30px; height: 30px; fill: #fff; } /* Dark mode chat icon */ html[data-theme="dark"] .chat-icon { background-color: #0d6efd; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); } html[data-theme="dark"] .chat-icon:hover { box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6); } .chatbox { position: fixed; bottom: 90px; right: 20px; width: min(450px, 90%); max-height: 80svh; background-color: #ffffff; border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); display: none; flex-direction: column; overflow: hidden; z-index: 111; transition: all 0.3s ease; } .chatbox a { color: #217aff !important; } .chatbox a:hover { color: #0041ce !important; text-decoration: underline !important; } html[data-theme="dark"] .chatbox a { color: #138dff !important; } html[data-theme="dark"] .chatbox a:hover { color: #31b3ff !important; text-decoration: underline !important; } .chatbox[data-open="true"] { display: flex; } /* Dark mode chatbox */ html[data-theme="dark"] .chatbox { background-color: #1a1a1a; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6); border: 1px solid #333; } .chatbox-header { background-color: #007bff; color: #ffffff; padding: 15px; border-top-left-radius: 10px; border-top-right-radius: 10px; font-weight: bold; display: flex; align-items: center; justify-content: space-between; } .chatbox-header svg { width: 20px; height: 20px; fill: #fff; cursor: pointer; transition: opacity 0.2s ease; } .chatbox-header svg:hover { opacity: 0.8; } /* Dark mode header */ html[data-theme="dark"] .chatbox-header { background-color: #0d6efd; border-bottom: 1px solid #333; } .chatbox-body { padding: 10px; overflow-y: auto; background-color: #f4f4f9; display: flex; flex-direction: column; flex: 1; min-height: 200px; } /* Dark mode body */ html[data-theme="dark"] .chatbox-body { background-color: #1a1a1a; color: #e0e0e0; } .chatbox-footer { display: flex; padding: 10px; border-top: 1px solid #ddd; background-color: #fff; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } /* Dark mode footer */ html[data-theme="dark"] .chatbox-footer { background-color: #222; border-top: 1px solid #444; } .chatbox-footer input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 20px; outline: none; margin-right: 10px; min-width: 0; background-color: #fff; color: #333; transition: all 0.2s ease; } .chatbox-footer input:focus { border-color: #007bff; box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1); } /* Dark mode input */ html[data-theme="dark"] .chatbox-footer input { background-color: #333; border-color: #555; color: #e0e0e0; } html[data-theme="dark"] .chatbox-footer input::placeholder { color: #999; } html[data-theme="dark"] .chatbox-footer input:focus { border-color: #0d6efd; box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.2); } .chatbox-footer button { padding: 10px 15px; background-color: #007bff; color: white; border: none; border-radius: 20px; cursor: pointer; transition: background-color 0.2s ease; white-space: nowrap; } .chatbox-footer button:hover { background-color: #0056b3; } .sample-message { cursor: pointer; border: 1px solid #ccc; border-radius: 10px; padding: 8px; margin: 5px; transition: border-color 0.2s ease; } .sample-message:hover { border: 1px solid #007bff; } html[data-theme="dark"] .sample-message { border: 1px solid #666; } html[data-theme="dark"] .sample-message:hover { border: 1px solid #0d6efd; } /* Dark mode send button */ html[data-theme="dark"] .chatbox-footer button { background-color: #0d6efd; } html[data-theme="dark"] .chatbox-footer button:hover { background-color: #0b5ed7; } .message { margin: 5px 0; max-width: 80%; display: flex; overflow-wrap: break-word; flex-direction: column; animation: fadeInUp 0.3s ease; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .message.user { align-self: flex-end; } .message.assistant { align-self: flex-start; } .message .time { font-size: 10px; color: #666; margin-top: 5px; } .message.user .time { text-align: right; } /* Dark mode time */ html[data-theme="dark"] .message .time { color: #999; } .message-box { padding: 10px; border-radius: 10px; position: relative; } .message-box.user { background-color: #007bff; color: #fff; } .message-box.assistant { background-color: #ebe6e6; overflow-x: auto; } .message-box.assistant p { color: #111 !important; } .message-box.assistant p:last-child { margin-bottom: 0; } /* Dark mode message boxes */ html[data-theme="dark"] .message-box.user { background-color: #0d6efd; } html[data-theme="dark"] .message-box.assistant { background-color: #2d2d2d; border: 1px solid #444; } html[data-theme="dark"] .message-box.assistant p { color: #e0e0e0 !important; } .typing { font-style: italic; color: #aaa; margin-top: 1rem; } /* Dark mode typing indicator */ html[data-theme="dark"] .typing { color: #666; } .start-over-confirmation-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: center; } /* Dark mode confirmation wrapper */ html[data-theme="dark"] .start-over-confirmation-wrapper { background-color: rgba(0, 0, 0, 0.7); } .start-over-confirmation { background-color: #f8f6f8; padding: 20px; border: 1px solid #f0b3f2; border-radius: 10px; width: 85%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .start-over-confirmation p { color: #111 !important; margin-bottom: 15px; font-weight: 500; } /* Dark mode confirmation dialog */ html[data-theme="dark"] .start-over-confirmation { background-color: #2d2d2d; border-color: #555; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } html[data-theme="dark"] .start-over-confirmation p { color: #e0e0e0 !important; } /* Button styles */ .btn { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.2s ease; margin: 0 5px; } .btn-sm { padding: 6px 12px; font-size: 12px; } .btn-danger { background-color: #dc3545; color: white; } .btn-danger:hover { background-color: #c82333; } .btn-secondary { background-color: #6c757d; color: white; } .btn-secondary:hover { background-color: #5a6268; } /* Dark mode buttons */ html[data-theme="dark"] .btn-danger { background-color: #dc3545; } html[data-theme="dark"] .btn-danger:hover { background-color: #bb2d3b; } html[data-theme="dark"] .btn-secondary { background-color: #495057; } html[data-theme="dark"] .btn-secondary:hover { background-color: #3d4146; } /* Empty conversation text */ .text-muted { color: #6c757d; } html[data-theme="dark"] .text-muted { color: #999; } .text-center { text-align: center; } .py-3 { padding-top: 1rem; padding-bottom: 1rem; } /* Utility classes */ .m-0 { margin: 0; } .fs-3 { font-size: 1.25rem; } .text-white { color: white; } .d-flex { display: flex; } .gap-2 { gap: 0.5rem; } /* Scrollbar styling */ .chatbox-body::-webkit-scrollbar { width: 6px; } .chatbox-body::-webkit-scrollbar-track { background: transparent; } .chatbox-body::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 3px; } .chatbox-body::-webkit-scrollbar-thumb:hover { background-color: #999; } /* Dark mode scrollbar */ html[data-theme="dark"] .chatbox-body::-webkit-scrollbar-thumb { background-color: #555; } html[data-theme="dark"] .chatbox-body::-webkit-scrollbar-thumb:hover { background-color: #777; } /* Hide elements with x-cloak */ [x-cloak] { display: none !important; } .chat-tooltip { opacity: 0; position: absolute; bottom: 70px; right: 0; background: #00aaff; color: white; padding: 8px 12px; border-radius: 10px; animation: fadeInOut 8s ease-in-out forwards; animation-delay: 2s; width: max-content; } @keyframes fadeInOut { 0% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } } </style> <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script> <div id="chatbox" x-data="{ isOpen: false, newMessage: '', messages: [], isTyping: false, loading: false, botResponsePaused: false, interval: null, showStartOverConfirmation: false, chatSessionUuid: null, sampleMessages: [ 'স্যাট একাডেমি কী?', 'স্যাট একাডেমিতে কি কি ফিচার আছে?', 'আমি কীভাবে একটি প্যাকেজ কিনতে পারি?', 'আমি কীভাবে স্যাট একাডেমির সঙ্গে যোগাযোগ করতে পারি?', ], isUserLoggedIn: false, chatboxShown: false, init() { this.chatboxShown = localStorage.getItem('chatbox_shown') === 'true'; setTimeout(() => { if (!this.chatboxShown) { this.isOpen = true; this.chatboxShown = true; localStorage.setItem('chatbox_shown', true); } }, 30000); }, toggleChatbox() { this.isOpen = !this.isOpen; if (this.isOpen) { this.loadChatHistory(); // Refresh the chat history every 5 seconds and clear the interval when the chatbox is closed } else { } }, sendMessage() { if (this.newMessage.trim() === '') return; // Current page title and URL const pageTitle = document.title; const pageUrl = window.location.href; const userMessage = { role: 'user', content: this.newMessage.replace(/<\/?[^>]+(>|$)/g, ''), time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }; this.messages.push(userMessage); this.newMessage = ''; this.isTyping = this.botResponsePaused ? false : true; setTimeout(() => { this.scrollToBottom(); }, 100); if (!this.isUserLoggedIn) { setTimeout(() => { this.messages.push({ role: 'assistant', content: `You are not logged in. Please <a href='/login'>login</a> to chat with me.`, time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }); this.isTyping = false; this.scrollToBottom(); }, 1000); return; } let that = this; $.ajax({ url: '/chatbot', type: 'POST', data: { chatSessionUuid: that.chatSessionUuid, message: userMessage.content, pageTitle: pageTitle, pageUrl: pageUrl, botResponsePaused: that.botResponsePaused }, headers: { 'X-CSRF-TOKEN': $('meta[name=csrf-token]').attr('content') }, success: function(response) { if (response.responseText) { const botMessage = { role: 'assistant', content: response.responseText, time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }; that.messages.push(botMessage); setTimeout(() => { MathJax.Hub.Typeset(); }, 300); } }, complete: function() { that.isTyping = false; that.scrollToBottom(); } }); }, loadChatHistory() { // Fetch the chat history from the server let that = this; $.ajax({ url: '/chatbot/history', type: 'GET', headers: { 'X-CSRF-TOKEN': $('meta[name=csrf-token]').attr('content') }, beforeSend: function() { that.loading = true; }, success: function(response) { // console.log(response); that.botResponsePaused = response.botResponsePaused; that.messages = response.chatHistory; that.chatSessionUuid = response.chatSessionUuid; setTimeout(() => { MathJax.Hub.Typeset(); }, 300); }, complete: function() { that.loading = false; that.scrollToBottom(); } }) }, scrollToBottom() { this.$nextTick(() => { const chatBody = this.$refs.chatBody; if (chatBody) { chatBody.scrollTop = chatBody.scrollHeight; } }); }, toggleStartOverConfirmation() { this.showStartOverConfirmation = !this.showStartOverConfirmation; }, startOver() { let that = this; that.messages = []; that.showStartOverConfirmation = false; $.ajax({ url: '/chatbot/clear', type: 'POST', headers: { 'X-CSRF-TOKEN': $('meta[name=csrf-token]').attr('content') }, data: { chatSessionUuid: that.chatSessionUuid }, success: function(response) { // console.log(response); } }); } }"> <div class="chat-icon" @click="toggleChatbox"> <div x-show="messages.length == 0 && !chatboxShown" class="chat-tooltip"><span class="badge badge-sm badge-success">NEW</span> SATT AI এখন আপনাকে সাহায্য করতে পারে।</div> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 2C6.48 2 2 6.48 2 12c0 3.25 1.54 6.15 3.96 8.04V22l3.71-1.85C10.44 20.59 11.21 20.7 12 20.7c5.52 0 10-4.48 10-10S17.52 2 12 2zm-1 14H8v-2h3v2zm5-4H8V8h8v4z" /> </svg> </div> <div class="chatbox" x-show="isOpen" data-open="true" x-cloak> <div class="chatbox-header p-5"> <h4 class="m-0 fs-3 text-white"> <a href="/satt-ai" style="font-weight: semibold; color: white !important;"> Satt AI <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="ms-1 inline-block" style="width: 16px;"> <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" /> </svg> </a> </h4> <div class="d-flex gap-2"> <button type="button" style="background: none; border: none; padding: 0;" @click="toggleStartOverConfirmation" title="Start over" x-show="messages.length > 0 && !showStartOverConfirmation" x-cloak> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.41 3.59 8 8 8s8-3.59 8-8-3.59-8-8-8z" /> </svg> </button> <button type="button" style="background: none; border: none; padding: 0;" @click="toggleChatbox" title="Close"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M18.3 5.71L12 12.01l-6.3-6.3-1.4 1.42L12 14.83l7.7-7.7z" /> </svg> </button> </div> </div> <div style="position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0;"> <div class="chatbox-body" x-ref="chatBody" :style="messages.length == 0 ? 'justify-content: center' : ''"> <template x-if="messages.length === 0"> <div class="py-4 px-3" x-ref="emptyConversationText"> <h5 class="mb-5 text-center fs-4">Hi, আমি <span class="text-primary">SATT AI</span>!</h5> <p class="mb-1 mt-8">আপনি আমাকে যেকোনো প্রশ্ন করতে পারেন, যেমনঃ</p> <ul class="list-unstyled d-inline-block text-start mx-auto" style="max-width: 320px;"> <template x-for="message in sampleMessages"> <li class="sample-message" x-text="message" @click="newMessage = message; sendMessage();"></li> </template> </ul> </div> </template> <template x-for="(message, index) in messages" :key="index"> <div :class="['message', message.role]"> <span class="time" x-text="message.time"></span> <div class="message-box" :class="message.role" x-html="message.content"></div> </div> </template> <div x-show="isTyping" class="message bot typing"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"> <path fill="currentColor" d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z" /> <circle cx="16" cy="10" r="0" fill="currentColor"> <animate attributeName="r" begin=".67" calcMode="spline" dur="1.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;1.75;0;0" /> </circle> <circle cx="12" cy="10" r="0" fill="currentColor"> <animate attributeName="r" begin=".33" calcMode="spline" dur="1.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;1.75;0;0" /> </circle> <circle cx="8" cy="10" r="0" fill="currentColor"> <animate attributeName="r" begin="0" calcMode="spline" dur="1.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;1.75;0;0" /> </circle> </svg> </div> </div> <div class="start-over-confirmation-wrapper" x-show="showStartOverConfirmation || loading" x-cloak> <div class="start-over-confirmation" x-show="showStartOverConfirmation" x-cloak> <div class="text-center py-3"> <p>Are you sure to start over?</p> <button type="button" class="btn btn-sm btn-danger" @click="startOver">Yes</button> <button type="button" class="btn btn-sm btn-secondary" @click="showStartOverConfirmation = false">No</button> </div> </div> <div class="spinner-border text-primary" role="status" x-show="loading" x-cloak> <span class="visually-hidden">Loading...</span> </div> </div> </div> <div class="chatbox-footer"> <input class="message-input" type="text" x-model="newMessage" placeholder="Type a message..." @keydown.enter="sendMessage" :disabled="isTyping || loading"> <button class="send-button" @click="sendMessage">Send</button> </div> </div> </div> <script> document.querySelector('.light-dark-btn').addEventListener('click', toggleTheme); let mobileSidebar = document.getElementById('mobile-sidebar'); function toggleTheme() { const currentTheme = document.documentElement.getAttribute('data-theme'); const newTheme = currentTheme === 'light' ? 'dark' : 'light'; document.documentElement.setAttribute('data-theme', newTheme); document.documentElement.classList.remove(currentTheme); document.documentElement.classList.add(newTheme); localStorage.setItem('theme', newTheme); } function toggleMobileSidebar() { if (!mobileSidebar) { return; } if (mobileSidebar.classList.contains('open')) { mobileSidebar.classList.remove('open'); } else { mobileSidebar.classList.add('open'); } } // Close sidebar on click outside document.addEventListener('click', function(event) { let toggleButton = document.getElementById('kt_aside_mobile_toggle'); if (!mobileSidebar.contains(event.target) && !toggleButton.contains(event.target)) { mobileSidebar.classList.remove('open'); } }); </script> <i class="fas fa-angle-up back_to_top_btn"></i> <script src="https://new-job-solution.test/ckeditor5-editor-classic/build/ckeditor.js"></script> <script> jQuery(document).ready(function() { jQuery('.st-header-menu nav').meanmenu({ meanMenuContainer: '.mobile-menu', meanScreenWidth: '1200', }); }); $('.sa_aside_mobile_toggle').click(function() { $('#mobileSidebarOffcanvas').offcanvas('show'); // $('.menu-sidebar').addClass('active'); // $('.body-overlay').addClass('active'); }); $('.body-overlay, .mobile-menu-close').click(function() { $('#mobileSidebarOffcanvas').offcanvas('hide'); // $('.menu-sidebar').removeClass('active'); // $('.body-overlay').removeClass('active'); }); // $('.sa_aside_mobile_toggle').click(function() { // $('.menu-sidebar').addClass('active'); // $('.body-overlay').addClass('active'); // }); // $('.body-overlay, .mobile-menu-close').click(function() { // $('.menu-sidebar').removeClass('active'); // $('.body-overlay').removeClass('active'); // }); // back to top var $backToTop = $(".back_to_top_btn"); $(window).on('scroll', function() { if ($(this).scrollTop() > 200) { $backToTop.css({ 'bottom': '7rem', 'right': '2.7rem' }); } else { $backToTop.css({ 'bottom': '-100px', 'right': '2.7rem' }); } }); $backToTop.on('click', function(e) { $("html, body").animate({ scrollTop: 0 }, 500); }); $(document).ready(function() { // Track user online presence axios.post('/update-presence'); }); </script> </body> </html>